Makzan / I share what I learnt

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.

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content: