CSS Grid: keywords de dimensionamento

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 index.

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 grid track size dependent on its content, you must use one of two keywords: min-content or max-content. Min-content grid track will try 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 min-content column forces its text content to "wrap" while the max-content column 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 type of content? 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 fr unit 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 auto keyword always "loses" with the fr unit, 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.

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

The above is the detailed content of CSS Grid: keywords de dimensionamento. For more information, please follow other related articles on the PHP Chinese website!