grid-auto-flow in snake lines?

by

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>

More Related Contents:

  1. CSS-only masonry layout
  2. Centering in CSS Grid
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Make grid container fill columns not rows
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. CSS grid square layout [duplicate]
  10. How to target a specific column or row in CSS Grid Layout?
  11. minmax() defaulting to max
  12. Why is my Grid element’s height not being calculated correctly?
  13. CSS grid – maximum number of columns without media queries
  14. Make row stretch across all columns in CSS Grid
  15. All widths set to width of widest element
  16. Make flex items overlap
  17. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  18. Understanding grid negative values
  19. Equal width columns in CSS Grid
  20. CSS grid wrapping
  21. How can I target a specific column or row in a CSS grid layout?
  22. How to make CSS Grid items take up remaining space?
  23. sticky position on css grid items
  24. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  25. What are the default values for justify-content & align content?
  26. How to make a fixed column in CSS using CSS Grid Layout?
  27. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  28. pseudo-element acting like a grid item in CSS grid
  29. How to calc() the number of rows in a grid template?
  30. CSS Grid Row Height Safari Bug

Leave a Comment