Grid-Auto-Flow in Snake Lines

grid-auto-flow in snake lines?

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>

How can I reverse flexbox direction on wrap to achieve snake wrap ?

A CSS grid solution similar to this one that works with a fixed number of elements per row (aka fixed number of columns).

.flex-container {  width: 500px;  background: orange;  display: grid;  grid-template-columns:repeat(5,1fr); /*define the number of column*/  grid-auto-flow:dense; /* this is important to fill all the space*/  grid-gap:20px;  padding:10px;}
.item {  background: purple;  height: 80px;  line-height: 80px;  color: white;  font-weight: bold;  font-size: 2em;  text-align: center;}
.item:nth-child(10n + 6)  {grid-column:5}.item:nth-child(10n + 7)  {grid-column:4}.item:nth-child(10n + 8)  {grid-column:3}.item:nth-child(10n + 9)  {grid-column:2}/*.item:nth-child(10n + 10) {grid-column:1} not needed*//* For N = number of columns   .item:nth-child((2xN)n + (N+1)) { grid-column:N; }  .item:nth-child((2xN)n + (N+2)) { grid-column:(N-1); }  ....  .item:nth-child((2xN)n + (2xN)) { grid-column:1; }
*/
.item:before {  content:counter(num);  counter-increment:num;}body {  font: 400 14px 'Arial', sans-serif;  counter-reset:num;}

<div class="flex-container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

CSS Grid - Make table-like grid overflow when item is too big

You want a table layout, then use table and not grid:

.table {  margin: 48px 0;  box-shadow: 0 5px 10px -2px #cfcfcf;  font-family: Arial;  display:table;  width:100%;}
.row {  display: table-row;  min-height: 48px;  border-bottom: 1px solid #f1f1f1;}
.column {  display: table-cell;  border: 1px solid #f1f1f1;  vertical-align: middle;  padding:10px 0;}

.row:first-child {  font-weight: bold;}

<div class="table">      <div class="row">        <div class="column">Name</div>        <div class="column">Age</div>        <div class="column">Favourite Book</div>        <div class="column">Favourite Color</div>        <div class="column">Favourite Meal</div>      </div>      <div class="row">        <div class="column">Jimmy</div>        <div class="column">23</div>        <div class="column">None</div>        <div class="column">White</div>        <div class="column">Paella de Chorizo</div>      </div>      <div class="row">        <div class="column">Johny</div>        <div class="column">56</div>        <div class="column">Finnegans Wake</div>        <div class="column">Purple, Magenta and Violet</div>        <div class="column">None</div>      </div>      <div class="row">        <div class="column">Robert The Snake Robertson</div>        <div class="column">1.234.567.890.000.000</div>        <div class="column">The Count of Monte Cristo</div>        <div class="column">Orange</div>        <div class="column">Apples</div>      </div>    </div>

How to order an array in a specific way with bootstrap

The best solution form me is to use column-count: 3, and for the responsiveness I update the column count based on the screen size in an easy way.

With column count I don't have to specify height or other css, just css 1 line.

Grid-Auto-Flow in Snake Lines

grid-auto-flow in snake lines?

How can I reverse flexbox direction on wrap to achieve snake wrap ?

CSS Grid - Make table-like grid overflow when item is too big

How to order an array in a specific way with bootstrap

Related Topics

Leave a reply