CSS Grid: sizing keywords
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-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's look at the simplest example.
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.
As you can see 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 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.
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.
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.
grid-template-columns: auto 1fr;
Thank you for reading this short post. If you found this content useful I’d be grateful if you share this content with others. Feel free to give me any form of feedback. This helps me to create better content and drives me to keep going. In the next article, I will focus on CSS Grid sizing functions. See you soon!