1

I hope someone can help me, I cannot for the life of me understand how the auto-fit/fill in grid layouts work. I know basic CSS but I have never worked with the grid layout before.

I have a large number of checkbox items with labels, which I want to arrange in several columns (depending on screen size), with column flow.

I have managed to use

grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );

which gives me almost the right thing, but as soon as I add

grid-auto-flow: column;

it outputs only 1 row with hundreds of columns. I've tried reading articles on how this works, and tried different configurations of grid-row-template and grid-column-template but I cannot get a satisfactory result. I don't want to specify an exact number of rows, as the number of items may change, it should just fill them in as needed while keeping the columns fitting on screen and the same width.

I will try and add a sample of my code, I hope it makes sense as I am using Smalltalk to pull the checkbox items from a repository and to print HTML to the browser.

Styles

.grid-container {
    font-size: .7em;
    display: grid;
}
.grid-container--fit {
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

Smalltalk printing the HTML, iterates to generate each checkbox element.

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>'.
Angela B.
  • 35
  • 6
  • 2
    *it outputs only 1 row with hundreds of columns* --> because by default there is only one row unless you define more. Exactly like columns if you consider `grid-auto-flow: row;` (only one column unless you define more) – Temani Afif Jan 13 '21 at 14:30
  • 1
    you are probably looking for this: https://stackoverflow.com/a/63795684/8620333 – Temani Afif Jan 13 '21 at 14:34
  • Hi there, thanks, but how can I configure it so that it adds as many rows as needed automatically for all the items? I don't know how many it will need and the number of items will probably increase over time – Angela B. Jan 14 '21 at 07:50
  • 1
    check the link I shared – Temani Afif Jan 14 '21 at 07:51
  • Oh thanks so much! Somehow I missed the link the first time. I tried that solution and it works very well. Thanks again, I appreciate it so much. – Angela B. Jan 14 '21 at 11:39
  • gerat, you may consider upvoting the solution to show that it was useful to you ;) – Temani Afif Jan 14 '21 at 12:07
  • I upvoted 3 of your answers but can't see how to accept them as the solution – Angela B. Jan 15 '21 at 09:44
  • you cannot accept answers of questions that aren't yours. Simply upvote the answer you think useful ;) (PS: don't upvote many answer for the same user, the system don't like this, simply upvote the ones you find and are useful for you) – Temani Afif Jan 15 '21 at 09:45

1 Answers1

0

The Actual difference between this two can be felt When you don't have enough columns in a row and have a full width of the viewport then what auto-fill does is it will fill the extra space with the blank columns and here in the other hand auto-fit does not fill the empty space it will add the columns and end there only for example if we have 3 columns in a full width then it will end in halfway middle you will not have access to the remaining half of the space left.

Like we know auto-fill add the empty columns to fill the space what is the use? The use here is if you want to change any of the column position by using grid-column it will work and we can use the remaining empty space for example if we want to place the column at the end of the row then it will take the actual width of the container unlike autofit. it is very hard to explain like this. hope you go it.

MD M Nauman
  • 421
  • 4
  • 10
  • Thanks for that explanation, it does help explain the difference between auto-fit and auto-fill. My problem, however, is I need the column flow for my items, and need to know how to configure the rows with column flow? – Angela B. Jan 14 '21 at 07:49