Block-grid layout with CSS Grid

In my last post Flexbox block-grid example, I created the block-grid effect by using Flexbox. In this example, I create the similar layout by using CSS grid.

See the Pen CSS Grid demo on CM462 by Thomas Seng Hin Mak (@makzan) on CodePen.

https://codepen.io/makzan/pen/ZvJByZ

.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.