Block-grid layout with CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-column-gap: 3px;
  grid-row-gap: 3px;
}

The minimal(200px, 1fr) means every grid column has minimal 200px width. If there are more spaces, they all have equal width because of the 1fr fraction setting. The repeat and auto-fill means repeating the column to fill in as many columns as possible according to the minmax(200px, 1fr) requirement.

Published on 2020-01-31. More articles like this: Code Snippets, CSS, Web Technologies.