CSS Grid

by Anton

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>More content to check row expanding with minmax(80px, auto) rule, just watch it.</li>
  <li>6</li>
  <li>7</li>
</ul>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); */
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(80px, auto);
  grid-column-gap: 10px;
  grid-row-gap: 14px;
}

li {
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
}