Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts.
I have a set of checkbox items with labels that I want to display in columns depending on screen size, with column flow. Using the following code:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
This gives me almost what I need, but when I add:
grid-auto-flow: column;
it only outputs one row with many columns. I've tried different configurations of grid-row-template and grid-column-template without success. I want the layout to adjust based on the number of items while keeping the columns fitting on the screen and the same width.
I will share a snippet of my code where Smalltalk generates the HTML for each checkbox item from a repository.
Styles
.grid-container {
font-size: .7em;
display: grid;
}
.grid-container--fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Smalltalk code generating HTML for the checkboxes:
aHTML nextPutAll: '<form><div class="grid-container grid-container--fit">';
subjectItems do: [:i | aHTML nextPutAll: '<label><input type="checkbox" name="subjects" value="', i description,'">', i description, '</label><br>'].
aHTML nextPutAll: '</div></form>';