DEV Community

Julia Shlykova
Julia Shlykova

Posted on • Edited on

Grid Basics. Track sizes

#css #beginners #tutorial

Table of contents

  1. Fractional unit (fr)
  2. Minimum and maximum range (minmax())
  3. Content-based sizing
  4. Repeating sizes

Grid layout allows to divide the container into rows and columns and place items in the specified cells. Also, we can leave some grid cells empty:

In order to draw grid layout, we need to first apply display: grid to the container. The second step is to define how many rows (grid-template-rows) and columns (grid-template-columns) we should have and what sizes they are.

In the following example, we divide the container into three columns (width sizes 50px, 100px and 200px correspondingly) and three rows with the same size range.

display: grid;
grid-template-columns: 50px 100px 200px;
grid-template-rows: 50px 100px 200px;
Enter fullscreen mode Exit fullscreen mode

Size values

There are multiple values that we can use to specify sizes of columns or rows in the grid:

  • px/em/etc
  • %
  • fr - fractional unit
  • minmax()
  • min-content, max-content, auto, fit-content()
  • repeat()

Fractional unit (fr)

fr unit depends on the available space of the container to determine final width:

grid-template-columns: 50px 1fr 2fr;
Enter fullscreen mode Exit fullscreen mode

Here we divide the space left after subtracting 50px into tree equal fractions. The second column occupies one such fraction, while the third one occupies two fractions.

Minimum and maximum range (minmax())

We can constrict the width of the column or row by using minmax(min, max) statement.

grid-template-columns: 50px minmax(50px, 400px) 400px;
Enter fullscreen mode Exit fullscreen mode

We set the width of the second column to at least 50px but not wider than 400px.

Warning fr can't be used as units for the minimum value in minmax().

auto inside minmax() statement

We can put auto inside minmax():

  • as a minimum value: it depends on min-width or min-height of the child. If they are not specified, it's min-content value.
  • as a maximum value: it can stretch track size beyond the content size if space allows:

Content-based sizing

min-content, max-content and auto values are based on the size of the content of the child element.

  • min-content equals to the largest word or largest image of the child;
  • max-content equals to the largest line of text;
  • auto works similar to minmax(min-content, max-content). However, if align-content or justify-content is set to stretch or normal, track size can be larger than content size.
  • fit-content(argument) behaves similar to minmax(auto, min(argument, max-content)).

Repeating sizes

We can easily set the same sizes for several columns or rows using repeat() function:

grid-template-columns: repeat(2, 1fr 100px) 1fr;
grid-template-rows: repeat(2, 100px);
Enter fullscreen mode Exit fullscreen mode

We have 10 cells: 5 columns and 2 rows. We repeat 1fr 100px twice for the first four columns, while the fifth one is 1fr.

minmax in repeat() function 

.grid {
 grid-template-columns: repeat(5, minmax(100px, 1fr));
}
Enter fullscreen mode Exit fullscreen mode

Here, we bound the column width to be at least 100px and stretch to 1 fraction if container width allows to.

auto-fill and auto-fit in repeat

What if the container width is less than 500px? Then the row will overflow the container. For this not to happen we need auto-fill or auto-fit instead of the actual number of repetitions:

.fill {
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.fit {
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
Enter fullscreen mode Exit fullscreen mode

auto-fill creates as many columns as it can, even if they are empty. auto-fit creates only needed columns.

Warning if we use auto-fill or auto-fit we can't use fr and content-based values as the second argument in repeat() function. Though you can use them as max position in minmax().

Top comments (0)