Deep Tech Point
first stop in your tech adventure
A guide to sizing keywords (span, min-content, max-content, auto, fit-content, auto-fit, auto-fill) in a CSS grid layout
July 16, 2021 | CSS

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

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.