Reputation: 11073
I am supposed to use css grid with 12 columns. I also am supposed to have the tables stack in a column when the viewport becomes smaller.
Is this possible with CSS grid? I read for row wrap I have to use auto-fill
or auto-fit
. But I use either of those two, I can not specify 12 columns.
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(12, 1fr);
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
grid-column: 1 /12;
}
.table1 {
grid-column: 1 / 7;
grid-row: auto / span 20;
}
.table2,
.table3 {
grid-column: 7/ 12;
grid-row: auto;
}
<div class="wrapper">
<div class="box header">header</div>
<div class="box table1">table 1</div>
<div class="box table2">table 2</div>
<div class="box table3">table 3</div>
</div>
Upvotes: 2
Views: 1460
Reputation: 372264
You cannot specify a fixed number of tracks with auto-fill
or auto-fit
.
§ 7.2.2.2. Repeat-to-fill:
auto-fill
andauto-fit
repetitionsWhen
auto-fill
orauto-fit
is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.If any number of repetitions would overflow, then 1 repetition.
The best way to achieve your layout, considering the limitations of the current (Level 1) version of CSS Grid, is with flexbox (demo), which comes with its own set of limitations, or with the crude and inelegant power of good old-fashioned media queries.
Upvotes: 2