Menu
I was wondering, if it's possible to use css grid in column mode and fill the cells in snake lines. Like this:
01 06 07 12
02 05 08 11
03 04 09 10
Any advice on this? Thanks for your help.
824
The default behavior of Grid Auto Flow is to layout the elements by row, working along the row until there are no more slots then moving on to the next row. If a row is not declared then an implicit grid track will be created to hold the items.
Auto-placement by column In this case grid will add items in rows that you have defined using grid-template-rows . When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized.
Auto-fill: The auto-fill property fills the rows with as many columns as it can fit. The newly added column may be empty but it will still occupy a space in the given row. It is an important property in the CSS grid that make a responsive layout without writing a media query for each grid.
You can use direction property to reverse a grid x-axis order. Nested elements will be reversed too so you have to make sure to add additional styles to fix this behavior.
Here is an idea if we consider the fact that you will always have 3 rows:
.container {
display:grid;
grid-template-rows:20px 20px 20px;
grid-auto-columns:20px;
grid-auto-flow:column dense;
}
.container > div:nth-child(6n + 4) { grid-row:3; }
.container > div:nth-child(6n + 5) { grid-row:2; }
/*.container > div:nth-child(6n + 6) { grid-row:1; } to illustrate the pattern but not needed */
/* Irrelevant styles */
.container {
grid-gap:5px;
counter-reset:num;
margin:10px;
}
.container > div {
border:1px solid;
}
.container > div:before{
content:counter(num);
counter-increment:num;
}<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>That you can easily extend to 4 rows or any number:
.container {
display:grid;
grid-template-rows:repeat(4,20px);
grid-auto-columns:20px;
grid-auto-flow:column dense;
}
.container > div:nth-child(8n + 5) { grid-row:4; }
.container > div:nth-child(8n + 6) { grid-row:3; }
.container > div:nth-child(8n + 7) { grid-row:2; }
/*.container > div:nth-child(8n + 8) { grid-row:1; }*/
/* For N = number of rows
.container > div:nth-child((2xN)n + (N+1)) { grid-row:N; }
.container > div:nth-child((2xN)n + (N+2)) { grid-row:(N-1); }
....
.container > div:nth-child((2xN)n + (2xN)) { grid-row:1; }
*/
.container {
grid-gap:5px;
counter-reset:num;
margin:10px;
}
.container > div {
border:1px solid;
}
.container > div:before{
content:counter(num);
counter-increment:num;
}<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
