📖 Mobile First Web Design
/
Responsive with Media Query
/
Grid layout
Block-grid 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.