Note: I just translated the text below and posted it here. References are at the end of this article.

Hello. Today I want to talk about some special CSS Grid keywords that are useful for defining the sizing of grid tracks. The ability to use these keywords will allow you to precisely determine the desired grid track sizes. So, let's go.

This article is part of my introduction to CSS Grid series. If you want to check out my previous posts, here you can find the full table of contents.

Introducing sizing keywords

When it comes to CSS Grid, there are only three keywords you can use to determine the size of tracks. These keywords are auto, min-content and max-content. All of them can be used in the CSS properties grid-template-colums and grid-template-rows.

Min-content and max-content

If you want to make the size of the grid track dependent on its content, you must use one of two keywords: min-content or max-content. Min-content grid track will attempt to maintain the minimum size without overflowing its content. Max-content grid track, however, assumes that the free space to expand is infinite and assumes the ideal width for your content.

Let me show you some examples showing the difference between the keywords mentioned. Keep in mind that each image contains two containers: the container with a min-content grid column on the left and the container with a max-content grid column on the right.

As you can see here, there is no difference in sizes between the min-content and max-content columns. The reason is that the image has its "default fixed size" which will not change unless you explicitly tell it to change. The content of a text, on the other hand, has the ability to "compress" its size depending on the situation. This compression is done using text wrapping (text wrapping), that is, single words do not wrap. Knowing this, let's replace the image in the example above with some text.

This time, the column widths are different. The column min-content forces its text content to "wrap" while the column max-content expands so much that no text wrapping is necessary. Note that the column min-content has the same width as the longest word and the column max-content is now wider than the container itself.

What will happen when a column contains more than one content type? Below is an example of columns containing image and text.

In both cases, the widest element determines the size of the column. In the case of min-content, this element is the image or the longest word. In the case of column max-width, this is an image or the entire text. Notice how both content types are separated vertically within the column. I want to discuss this behavior in one of my future articles.

Keyword Auto

The keyword auto is related to the unit fr that I described in the two previous articles. It similarly determines that the grid track must "fill" all the available space on a given axis.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

However, there are two main differences between the auto keyword and the fr unit. First, the keyword auto is not a unit, so you cannot use it with a numeric value (e.g. 2auto) like you can with fr. Second, the keyword auto always "loses" with the unit fr, when both are used together. See the example below.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

You can expect column auto to "fill" an equal amount of space to column fr in the horizontal dimension. However, the presence of the column fr causes the column to auto "shrink" its size to the size of the content present.

Note that in the case of text content, auto grid track behaves differently than min-content/max-content grid track. When auto is mixed with fr, auto-track never forces the text content to "wrap" unless auto-track "fills" all available space.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

Thank you for reading this short article. If you want to read more content like this, follow my dev.to or twitter account. Also, feel free to give me any kind of feedback. I would love to read your comments. See you soon in my next article!

PS. If you want to support my work, I would be grateful for a cup of coffee. Thanks. ❤️

Source

Article written by Mateusz Kirmuć.