One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior.<\/p>\n\n\n\n\n\n\n\n
We’re able to do that using just one line of CSS \u2014 the one-liner that reminds me of when Dumbledore just waved his wand in Horace’s apartment and “the furniture flew back to its original places; ornaments reformed in midair, feathers zoomed into their cushions; torn books repaired themselves as they landed upon their shelves…”<\/em>.<\/p>\n\n\n\n This magical, media-query-less responsiveness is achieved using the To summarize, the The So we need to start by specifying a minimum width for the columns, making sure they don’t get too narrow. We can do that using the But the way CSS Grid works, this will cause overflow in the row. The columns will not wrap into new rows if the viewport width is too narrow to fit them all with the new minimum width requirement, because we’re explicitly telling the browser to repeat the columns 12 times per row.<\/p>\n\n\n\n To achieve wrapping, we can use the These keywords tell the browser to handle the column sizing and element wrapping for us so that the elements will wrap into rows when the width is not large enough to fit them in without any overflow. The fraction unit we used also ensures that in case the width allows for a fraction of a column to fit but not a full column, that space will instead be distributed over the column or columns that already fit, making sure we aren’t left with any empty space at the end of the row.<\/p>\n\n\n\n At first glance of the names, it might seem like Maybe it seems like you are getting extra space at the end of the column with Let’s take a look at what is really happening under the hood.<\/p>\n\n\n In a recent CSS workshop, I summarized the difference between This may sound confusing at first, but it makes a lot more sense when you visualize this behavior. So we’ll be doing exactly that, with the Firefox DevTools’ Grid Inspector helping us visualize the size and position of our Grid items and columns.<\/p>\n\n\n\n Consider the following demo as an example.<\/p>\n\n\n\nrepeat()<\/code> function and the auto-placement keywords.<\/p>\n\n\n\nrepeat()<\/code> function allows you to repeat columns as many times as needed. For example, if you’re creating a 12-columns grid, you could write the following one-liner:<\/p>\n\n\n\n.grid {\n display: grid;\n\n \/* define the number of grid columns *\/\n grid-template-columns: repeat(12, 1fr);\n}<\/code><\/pre>\n\n\n\n1fr<\/code> is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space. That is, they’re all fluid, equal-width columns. And the grid will, in this example, always have 12 columns regardless of how wide it is. This, as you have probably guessed, is not good enough, as the content will be too squished on smaller viewports.<\/p>\n\n\n\nminmax()<\/code> function.<\/p>\n\n\n\ngrid-template-columns: repeat( 12, minmax(250px, 1fr) );<\/code><\/pre>\n\n\n\nauto-fit<\/code> or auto-fill<\/code> keywords.<\/p>\n\n\n\ngrid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );<\/code><\/pre>\n\n\n\nauto-fill<\/code> and auto-fit<\/code> are opposites. But in fact, the difference between is quite subtle.<\/p>\n\n\n\nauto-fit<\/code>. But when and how?<\/p>\n\n\n\nFill or Fit? What’s the difference?<\/h3>\n\n\n
auto-fill<\/code> and auto-fit<\/code> as follows:<\/p>\n\n\n\nauto-fill<\/code> FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.<\/p>auto-fit<\/code> FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill<\/code> ) and then collapsing the empty ones.<\/p><\/blockquote>\n\n\n\n