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