Block-grid layout with CSS Grid

Thomas Mak wrote at 2018-01-04.

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

Comments

no comments yet.

Please login to chat.