CSS Grid: sizing keywords

#css #tutorial #beginners

Hello. Today I want to talk about some special CSS Grid keywords which are useful to define the size of grid tracks. The ability to use these keywords will allow you to precisely determine your desired grid track sizes. So let’s dive in.

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

Introducing sizing keywords

When 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 are allowed to use in both grid-template-colums and grid-template-rows CSS properties.

Min-content and max-content

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

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

As you can see here, there is no difference in sizes between min-content and max-content columns. The reason is that the image has its default fixed size which won't change unless you explicitly tell it to. Text content on the other hand has the ability to ‘compress’ its size depending on the situation. This compression is done using text wrapping (singe words won't break). Knowing that, let’s replace the image from the above example with some text.

This time columns' widths are different. Min-content column forces its text content to wrap while the max-content column expands so far that no text wrapping is needed. Notice that the min-content column is as width as the longest word and the max-content column is now wider than the container itself.

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

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

Auto keyword

Auto keyword is related to fr unit which I described in the previous two articles. It determines analogously that the grid track should fill all the available space in a given axis.

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

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

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

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

Notice 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, the auto-track never forces text content to wrap unless the auto-track fills all the 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 you can follow my dev.to or twitter account. Also, feel free to give me any form of feedback. I'd love to read any comments from you. See you soon in my next article!

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