css grid autoflow columns example

css grid autoflow columns example

by Yury

HTML

<div class="grid">
  <p>Text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text text text text text</p>
  <p>Text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text</p>
</div>

CSS

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, max-content));
  /* or looks better: */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 62px;
  column-gap: 50px;
  row-gap: var.$gap-main;
  align-items: center;
  justify-items: stretch;
}
.grid p {
  display: block;
  height: 100%;
  max-height: 50px;
  color: pink;
  background: green;
}