Sizing keywords represent another way we can define the size of grid items – rows and columns. Of course, as already explained in a tutorial about CSS grid items’ properties and their values you can use length values such as px, em, rem, vw and vh and fr, but you can also use different keywords, such as span, min-content, max-content, auto, fit-content, auto-fit, auto-fill and others.
Span keyword to define the length of items
We’ve worked with a span keyword before, but let’s take a look at that example again:
Here is a shorthand version of the span keyword example:
.my-grid-item-1 { //we have to provide an exact name of a grid item we want to manipulate
grid-column: 3 / six; // we provide a number of a column line where the item starts and a name of a line where the item ends
grid-row: 1 / span 2; // we provide a number of a row line where the item starts and that the item spans through 2 rows
}We basically said that a grid item, named “my-grid-item-1” starts at column line 3 and ends at a column line named six, and that it starts at a row line number 1 and the item spans through 2 rows.
min-content and max-content keywords to define the length of items
min-content keyword presents the minimum size of content or in other words – the largest minimal content contribution of the grid items positioned in the grid track. If we have a line of text “This is my text”, the min-content keyword will very probably cause our grid track to be the width of the word “This”.
max-content on the other hand presents the maximum size of the content. If we take the sentence above, the max-content keyword will probably show us the length of the entire sentence.
auto keyword to define the length of items
auto keyword often behaves like fr units, this is especially the case with auto track sizes because the tracks can be stretched by the align-content and justify-content properties. So, when working with the auto keyword, it will take up any remaining space in the grid container.
fit-content keyword to define the length of items
fit-content keyword uses the space available, but never less than min-content (the smallest an element can be based on the content it contains) and never more than max-content (the maximum size of the content of an element can push it).
auto-fill and auto-fit keywords to define the length of items
- auto-fill will fill the row with as many (implicit) columns as it can fit, even though the newly added columns will be empty and will occupy the space.
- auto-fit keyword on the other hand will fit columns that are available by expanding them so that they take up any available space. What the browser actually does? The first fills that extra space with extra columns – the same as with auto-fill – and then collapses the empty columns.
Sizing keywords are closely connected to the sizing functions, such as min(), max() and minmax() and if you want to get to know them, you should read that article.