muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-05-02 16:16:41 +07:00
Code Packages Activity Actions

fixed grid layout

Browse source
This commit is contained in:
muerwre 2019-04-04 12:08:36 +07:00
parent debb0640da
commit 6168841f78
8 changed files with 73 additions and 31 deletions
src/components/flow/TestGrid
style.scss

28
src/components/flow/TestGrid/style.scss
View file

@ -1,3 +1,5 @@
$cols: $content_width / $cell;
.grid {
//display: grid;
padding: $gap / 2;
@ -5,12 +7,15 @@
}
.grid_test {
width: 1024px;
width: $content_width;
display: grid;
grid-template-columns: repeat(5, 256px);
grid-template-rows: repeat(2, 256px);
grid-template-columns: repeat($cols, 1fr);
grid-template-rows: $cell * 1.2 - 4;
grid-auto-rows: 256px;
grid-auto-flow: row dense;
grid-column-gap: 4px;
grid-row-gap: 4px;
}
.cell {
@ -18,13 +23,14 @@
box-sizing: border-box;
display: flex;
flex: 0 0;
background: $cell_bg;
&::after {
content: ' ';
background: transparentize(white, 0.9);
width: 100%;
height: 100%;
}
//&::after {
// content: ' ';
// background: transparentize(white, 0.9);
// width: 100%;
// height: 100%;
//}
}
.vert_2 {
@ -50,3 +56,7 @@
.hor_4 {
grid-column-end: span 4;
}
.pad_last {
grid-column-end: $cols + 1;
}