• Auto-sizing Columns in CSS Grid: auto-fill vs auto-fit
• SARA SOUEIDAN
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: pot – code
• Proofread by: ParadeTo, realYukiko

CSS Grid column width adaptive:auto-fill vs auto-fit

In addition to explicitly specifying column sizes, CSS Grid has a very powerful capability of repeating -to-fill columns and then automatically layout the content. In other words, the developer only needs to specify the number of columns, and the adaptation aspect (small viewport size means fewer columns, and vice versa) is left to the browser, without the need for media queries.

The above function can completely can achieve in a statement, it can not help but reminds me of harry potter, dumbledore in Horace waving his “little magic wand in the home, and then” furniture pieces to jump back to its original position, adornment restored prototype in midair, feather to drill in soft pad, automatically repair damaged books, neatly arranged on shelves…” .

It’s amazing, and there’s no media search. This is all thanks to the repeat() method and the auto-layout keywords.

In fact, there are many technical articles on this topic, I will not repeat the basic usage here, if you are interested in Tim Wright’s blog, I highly recommend.

In summary, the repeat() method can split up as many columns as you want. For example, if you needed a grid system based on 12 columns, you could write:

.grid { display: grid; /* Specify the number of grid columns */ grid-template-columns: repeat(12, 1fr); }Copy the code

1FR means asking the browser to divide the grid space equally, one part for each column, creating 12 columns of variable but equal width. And the 12 columns remain the same regardless of the viewport width. However, as you probably know, if the viewport is too narrow, the content will inevitably be squashed.

Therefore, it is necessary to set the minimum column width to ensure that the container is not too narrow, using the minmax() method.

grid-template-columns: repeat( 12, minmax(250px, 1fr) );
Copy the code

In the nature of the Grid, this will definitely cause the current row to overflow, even if the viewport cannot accommodate the columns under the minimum column size constraint, the columns will not wrap because the browser was told to have 12 columns.

To implement line breaks, you can use auto-fit or auto-fill.

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
Copy the code

This statement leaves it up to the browser to handle column widths and element newlines. If the container is not wide enough, the element is automatically wrapped and no overflow is caused. We’re still using fr units, so that if there’s not enough space left in the row to fit another column, the existing column can automatically expand to fill the entire row without wasting space.

At first glance, the names auto-fill and Auto-fit seem like polar opposites, but the differences are actually quite subtle.

If anything, auto-fit leaves a lot of white space at the end of the current line, but when and why?

Let’s find out.

What is the difference between Fill and Fit?

At a recent CSS workshop, I summed up the difference between auto-fill and auto-fit like this:

Auto-fill tends to hold more columns, so it implicitly creates columns to fill the current row if there is room for a new column within the width limit. Even if you create a column that has no content, it still takes up space in the row.

Auto-fit tends to use the minimum number of columns to fill up the front row. Like Auto-fill, browsers implicitly create columns to fill the extra row space, then collapse these columns to make room for the remaining columns to expand.

It may seem confusing at first, but I’ll do a visualization of this behavior later to make it easier to understand. Firefox has a Grid analysis tool that helps show the size and position of elements and columns.

Take the demo here for example.

Define the columns again using the repeat() method and set the width to a minimum of 100px and a maximum of 1fr, so that each column gets the same amount of space if there is extra space. Let the column count count itself, leaving line feed and adaptation to the browser.

The first example uses the auto-fill keyword, and the second is auto-fit.

.grid-container--fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
Copy the code

In certain circumstances,auto-fill 和 auto-fitThe effect is the same.

It looks the same, but it’s different inside. It looks the same just because of the width of the viewport.

The key point that makes them produce different results is the setting of the number and width of columns in grid-template-columns. Different examples will produce different results.

The difference becomes apparent when the viewport is wide enough to accommodate additional columns to the current row. The browser handles this in one of two ways, depending on whether there is more content to put in the extra column.

So, if the current row has room for the next column, the browser behaves like this:

1. “I have room here for one more column. Is there anything else I haven’t put in (e.g. Grid Item)? If there is, OK, I will add another column in the current row, if the viewport is too small, I run out of space, I will add another row.
2. If there is no more content: “Should this new column be left empty, or should it collapse so that the rest of the column expands to take up its space?”

The emergence of auto-fill and auto-fit answers the last question: when there’s not much content, do you collapse or do you just let it take up space? That’s the question, and the choice, ultimately depends on your content and how you want that content to behave in a responsive design.

Let’s explain it in detail. In order to vividly show the difference between auto-fill and auto-fit, please follow my steps and observe the changes on the screen. Right now, I’m resizing the viewport to leave enough horizontal space to fit more columns into the current row. Keep in mind that the two rows in this example have exactly the same content and the same number of columns, the only difference being that the first row is auto-fill and the second row auto-fit.

This should be clear, if still not clear, let’s continue:

Auto-fill does this: “Come and fill up this row, as many columns as you can. I don’t mind if some columns are completely transparent — just because you can’t see them doesn’t mean they don’t exist. If there is space, add columns. If there is no content, I take up space (i.e. content /grid item).

As mentioned above, auto-fill holds as many columns as possible, even if some columns are empty, while auto-fit is slightly different. Like Auto-fill, auto-fit increases the number of columns as the viewport widths, except that the newly added columns collapse (including the gap). The Grid tool in Firefox is a great way to visualize this process. As the viewport widths, new columns are added and the Grid lines grow, so you can see the whole process with the naked eye.

What auto-fit does: “Fill in the existing columns, then expand until you fill up the entire row. Blank columns are not allowed to take up the extra space, which should be used well, and columns (content/Grid Item) that are already filled in should expand to fill that space.”

It’s important to remember that in both cases, the extra columns (whether or not they eventually collapse) are not implicit columns — that has a special meaning in official documentation. The columns added, or created, are in the explicit Grid, which is the same as the explicit grid with 12 columns. So, with a column number index, -1 points to the end of the grid, which would not be the case if it was created implicitly. Chicken drumsticks for Rachel Andrew for this tip.

conclusion

The difference between auto-fill and auto-fit is only noticeable if the row width is large enough to accommodate additional columns.

With Auto-fit, the content area automatically stretches to fill an entire line; When using auto – the fill, on the other hand, the browser treats null columns and the substance column, equally and allow it to take up space, even though these null columns and no substantial contents, they will also share the row space, so can also indirectly affect the magnitude of those who have the content column, or width.

Which behavior you prefer depends on your needs, and to be honest, I’m also wondering where auto-fill might be a little more appropriate than auto-fit. If you happen to be around such a scenario, please feel free to comment in the comments section.

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.