DEV Community: Mateusz Kirmuć

CSS Grid: repeat function — beyond basics

Mateusz Kirmuć — Wed, 03 Aug 2022 13:50:58 +0000

Hello. In today's article, I want to tell you more about the CSS Grid repeat() function. Beyond its basic abilities, this inconspicuous function offers some extremely powerful feature: allows you to dynamically change a number of tracks relative to available space. Here, I’ll show you how it works.

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.

So far I told you that the repeat() function can be used as a shortcut for long, repetitive tracks size definition. You can achieve this functionality by providing an integer as the first argument of a function call. This is convenient because helps avoid long lines of code making code cleaner and more readable.

grid-template-columns: repeat(5, 200px);

instead of:

grid-template-columns: 200px 200px 200px 200px 200px;

Besides integer, the repeat() function accepts two additional keywords as its first argument. These keywords are auto-fit and auto-fill.

.container {
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-columns: repeat(auto-fill, 200px);
}

Keyword as the first argument of repeat() function.

Using keywords as a function argument causes the number of tracks in a given dimension to be dynamically adjusted to available space within the grid container. This behavior is common for both keywords.

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

Notice how new tracks are added when enough free space becomes available, and how existing tracks are removed when available space shrinks.

Also, keep in mind that using this method every existing or newly created track is explicit. This means, for example, you can refer to the tracks relative to the last line (using negative line numbers).

<div class="container">
    <div class="item"></div>
</div>

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

.item {
    ...
    grid-column: -1 / -2;
}

The differences between auto-fill and auto-fit keywords.

The main difference between both keywords lays in collapsing of tracks. The collapsed track is the track that takes no space in a given dimension. The usage of the auto-fill keyword does not allow the tracks to collapse, even if they do not contain a grid item inside them.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

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

Notice how all the tracks have a non-zero width. This behavior doesn’t change, no matter how many tracks contain grid items.

Usage of the auto-fit keyword force tracks without any grid item to collapse. Occupied tracks take the maximum possible size allowed by their definition. This is possible because their size is not restricted by the size of not occupied tracks.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

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

Keep in mind that even though collapsed columns are not visible, they exist as a part of the grid (here on the right side of the grid).

Restrictions on the type of the second argument.

The use of the repeat() function with the auto-fill/auto-fit keyword restricts the type of the second argument. The allowed type must belong to the fixed-size group of allowed types. According to mdn <fixed-size> can take the form of:

a length-percentage value
a minmax() function with:
- min given as a length-percentage value
- max given as one of a length-percentage value, a flex value, or one of the following keywords: min-content, max-content, or auto
a minmax() function with:
- min given as a length-percentage value or one of the following keywords: min-content, max-content, or auto
- max given as a length-percentage value

Multiple use of the repeat function in a grid definition.

It’s possible to define a structure of a grid in a given dimension using multiple repeat() function calls. However, when the first call uses the auto-fill/auto-fit keyword as a first argument, any subsequent call must use the following pattern: repeat(<integer>, <fixed-size>).

/* Valid: */
repeat(auto-fit, 100px), repeat(3, 20%)
repeat(auto-fill, 10%, repeat(10, minmax(100px, 500px))

/* Invalid: */
repeat(auto-fit, minmax(100px, 1fr)) repeat(auto-fill, 70%)
repeat(auto-fill, minmax(min-content, 100px)) repeat(auto-fit, 1fr);

Thank you for reading this short article. If you want to read more content like this you can follow my dev.to or twitter account. Also, feel free to give me any form of feedback. I'd love to read any comments from you. See you soon in my next article!

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: custom grid item placement — grid template

Mateusz Kirmuć — Mon, 27 Jun 2022 11:24:32 +0000

Hello. Today's article will be the last one dedicated to custom grid item placement inside the grid. Previously, I focused mainly on describing how to change default grid item positioning using grid-row(column)-start(end) CSS properties (and their shorthands). Now, I want to show you a different approach based on the concept of a grid template.

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.

Naming grid item using the grid-area property.

The discussed method requires that every grid item that needs to be custom positioned should contain its own name. You can name grid item using the same grid-area CSS property which I described in my previous article.

Aside from the arguments I already mentioned, this property takes a single argument of type custom-ident which acts as a name for this grid item.

.grid-item {
  grid-area: myCustomName;
}

Positioning of named grid items using the grid-template-areas property.

After naming each element, you can use those names to define the grid template. This can be done with the grid-template-areas CSS property which is the property of the grid container element.

Keep in mind that all examples presented in this article will share the following common definitions.

.container {
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.grid-item {
  grid-area: item;
}

A grid template is some kind of representation of a container grid. Its size however does not have to correspond to the size of the container grid — may be larger or smaller. Using previously defined names, you can plan the placement of each grid inside the template which will correspond to placement in a real grid.

The grid-template-areas property takes any number of non-empty string arguments. Every argument represents a single row of the grid, starting from the top. Cells in rows are separated using space and may be one of two values: name or dot. The name refers to the named grid item and the dot represents an empty cell, not occupied by any grid item.

.container {
  grid-template-areas: 
    ". . . . ."
    ". . item . ."
    ". . . . ."
    ". . . . ."
    ". . . . .";
}

.container {
  grid-template-areas: 
    ". . . . ."
    ". . item . ."
    ". . . . .";
}

The second example shows that a number of string arguments in grid-template-areas property (3) do not have to match the number of rows defined in the grid (5).

Each row can contain any number of cells, but this number must be equal in all rows.

.container {
  /* invalid: number of cells in rows are different */
  grid-template-areas: 
    ". ."
    ". . item . ."
    ". . . . . . . . . . .";
}

.container {
  grid-template-areas: 
    ". . ."
    ". item ."
    ". . .";
}

Notice that number of cells in each row does not have to match the number of columns defined in the grid.

If adjacent names in the grid template (both between columns and rows) are the same, the grid item will be assigned to the appropriate grid area.

.container {
  grid-template-areas: 
    ". . . . ."
    ". item item . ."    
    ". item item . ."
    ". . . . ."    
    ". . . . .";
}

A group of adjacent names must form a rectangular shape, otherwise, such a layout will be invalid.

.container {
  /* invalid: adjacent names not form rectangular shape */
  grid-template-areas: 
    "item . . . ."
    "item item . . ."    
    "item item item . ."
    ". . . . ."    
    ". . . . .";
}

Assigning a grid item to a selected grid area (or grid cell) will cause that lines that define the boundaries of this area will automatically receive appropriate names. These names are formed according to the following formula: item name + prefix.

.container {
  grid-template-areas:
    ". . . . ."    
    ". . . . ."
    "item item . . ."
    "item item . . ."
    ". . . . .";
  }
}

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: custom grid item placement — beyond basics

Mateusz Kirmuć — Mon, 20 Jun 2022 14:16:46 +0000

Hello. In my previous article, I talked about basic methods of custom grid item placement inside the grid. Today, I want to extend this subject by explaining all cases of using grid item custom placement CSS properties with a string argument.

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.

So far I covered some basic argument combinations used with grid item custom placement CSS properties (grid-row/column-start/end and their shorthands). Today I want to focus on every possible combination containing string argument.

Every example presented today will be simplified to a single grid item and single dimension as the same rules are applicable for multiple items and the second dimension.

String as a single argument.

If you remember, the string argument refers to the grid line name if such exist. If we use string as a single argument, these line names should contain additional prefix: -start in case of grid-row/column-start and -end in case of grid-row/column-end.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [line] 1fr [line line-start] 1fr [line] 1fr [line line-end] 1fr [line];
}

.item {
  grid-column-start: line;
  grid-column-end: line;
}

Notice how lines without prefixes are ignored during determining the size of the expected grid area occupied by grid item.

In case when no line with the required prefix exists, the first line with a name identical to the string will be used (counting from left or top grid edge). However, this applies only to -start prefix and grid-row/column-start properties.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3 line] 1fr [col4] 1fr [col5 line];
}

.item {
  grid-column-start: line;
  grid-column-end: line;
}

Notice how the grid-column-end property falls to default (col4) as no -end prefixed line name was founded.

String argument with a number.

Another combination we can use is a string argument with a number. This combination refers to the n-th line with a name identical to the string (counting from the left or top grid edge), where n is equal to the number argument.

Notice that argument order is irrelevant.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
}

.item {
  grid-column-start: 2 line;
  grid-column-end: line 5;
}

Negative number arguments are allowed. In such case lines with the given name will be searched from right to left (or bottom to top) edge of the grid.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
}

.item {
  grid-column-start: -2 line;
  grid-column-end: line -4;
}

If the number argument is larger than the number of lines in a given dimension, then it is assumed that all implicit lines (if exist) contain such a name.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1 line] 1fr [col2 line] 1fr [col3 line] 1fr [col4 line] 1fr [col5 line];
  grid-auto-columns: 20px;
}

.item {
  grid-column-start: 4 line;
  grid-column-end: 7 line;
}

Notice that narrow columns on the right side of the grid are implicit.

String argument with span keyword.

We can use a string argument with a span keyword as well. This combination refers to the first line with a name identical to the string, starting from the left (or top) edge of the grid.

However, to effectively use any combination of string argument with the span, both -start and -end properties should be defined, and only one of which should contain the span keyword.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
}

.item {
  grid-column-start: col2;
  grid-column-end: span col4;
}

Moreover, in any case of using the span keyword with string, the line number that -end property refers to should not be larger than the line number that -start property refers to.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
}

.item {
  /* invalid: -start property refers to line 5, -end property refers to line 1 */
  grid-column-start: col5;
  grid-column-end: span col1;
}

A combination of arguments can be even more complex. We can use the previous span + string combination with a number. This is similar to using a string argument with a number, except the number cannot be negative!

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [line col3] 1fr [line col4] 1fr [line col5];
}

.item {
  grid-column-start: col2;
  grid-column-end: span line 2;
}

Analogously, if the number argument is larger than the number of lines in a given dimension, then it is assumed that all implicit lines (if exist) will contain that name.

.container {
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5];
  grid-template-columns: [col1] 1fr [col2] 1fr [line col3] 1fr [line col4] 1fr [line col5];
  grid-auto-columns: 20px;
}

.item {
  grid-column-start: col2;
  grid-column-end: span line 5;
}

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: custom grid item placement — basics

Mateusz Kirmuć — Tue, 14 Jun 2022 13:12:22 +0000

Hello. In today's article, I want to tell you about a custom placement of a grid item inside the grid. Most often, default grid item placement managed by auto-placement algorithm does not fulfill our layout expectations. Luckily, we can do something about it, and I’ll show you how.

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.

In my previous article, I mentioned that every grid item is by default assigned to a single, unique grid cell in a specific order. The truth is, we can overwrite this behavior and assign item to whatever grid cell or grid area inside the grid.

Notice how I changed the default placement of this item from top-left cell to bottom-right cell.

CSS Grid custom placement properties.

In order to achieve our desired custom placement, we can use four main CSS properties.

grid-row-start
grid-row-end
grid-column-start
grid-column-end

Those four properties represent grid lines within the grid. These are the boundaries of the selected area to which the selected item will be assigned.

.item {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
}

Defining all properties is not required. We can only define one or all four. Missing lines will be determined automatically.

.item {
  grid-row-start: 2;
  grid-column-start: 2;
}

Each of the listed properties can take the same values. These are:

global CSS keywords (inherit, initial, revert, revert-layer, unset)
CSS Grid-specific values: keyword ‘auto’ or some combination of number, string, and keyword ‘span’

Global CSS keywords are shared between many different properties in CSS thus I won't cover them in this article. Here I want to focus on CSS Grid-specific values only.

Keyword ‘auto’ means that the grid line will be determined automatically by auto-placement algorithm.

The number simply indicates the line number in a given direction. The number can be negative, but cannot be equal to zero.

String argument refers to the grid line name if such exist.

The keyword ‘span’ means that we are dealing with a distance. In most cases, span is followed by a number or word. Span keyword without following part is not allowed.

Let’s look at some examples.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-row-start: 1;
  grid-row-end: row-three;
  grid-column-start: auto;
  grid-column-end: col-three;
}

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-row-start: 1;
  grid-row-end: span row-four;
  grid-column-start: 1;
  grid-column-end: span 2;
}

There are more acceptable combinations of the mentioned values. For example, you can find combinations like string + number or span + string + number. I want to tell more about them in my future ‘beyond basics’ article.

Shorthand properties.

If more than one grid line needs to be specified, we can use some special shorthand properties: grid-row, grid-column, or grid-area.

Shorthand properties accept the same values as discussed above separated using slash or slashes.

Grid-row and grid-column properties allow us to define both the start and end grid lines in a given direction. The missing definition will be replaced by auto.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-row: 1 / row-three;
  grid-column: col-two / span 2;
}

Grid-area property enables us to define all four grid line boundaries at the same time. These definitions are separated by slashes, starting from the top line and going counterclockwise.

.container {
  ...
  grid-template-rows: [row-one] 1fr [row-two] 1fr [row-three] 1fr [row-four];
  grid-template-columns: [col-one] 1fr [col-two] 1fr [col-three] 1fr [col-four];
}

.item {
  grid-area: 2 / 1 / span 2 / col-three;
}

Remember that grid-area property does not force us to define all four grid lines at once. In my future article, I will show what will happens if the one (or more) definition is missing and what other placement-related feature this property has to offer.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: nested grid

Mateusz Kirmuć — Mon, 06 Jun 2022 10:00:29 +0000

Hello. In today's article, I want to talk about nested grids. I will show you how to create grids inside the grid which can be very helpful in creating complex layouts. Let’s get started.

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.

Nested grid.

In my previous article, I talked about grid items. It’s important to remember that any content inside a grid item is by default positioned according to normal flow. You can change that, and one of the methods is to define a given grid item as a nested grid container.

The way to create a nested grid is similar to creating a regular grid. To define a new nested grid you have to use the same display: grid property and grid track properties inside the grid item CSS rule.

<div class="container">
  <div class="grid-item nested-grid">
  </div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

Remember that no element of the nested grid is inherited from the parent grid. This includes grid lines (both names and ids) and gaps between grid tracks. You have to define those on your own.

.container {
  display: grid;
  grid-template-columns: [first-col] 1fr [second-col] 1fr [third-col];
  grid-template-rows: [first-row] 1fr [second-row] 1fr [third-row];
  gap: 15px 2rem;
}

.grid-item.nested-grid {
  display: grid;
  grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}

The nested grid can influence the size of the parent grid track that contains it. This happens when the parent grid track is flexible enough to allow it — its size should be defined using auto, fr, min-content, max-content, or fit-content.

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: auto 1fr 1fr;
}

.grid-item.nested-grid {
  display: grid;
  grid-template-columns: 1.5em 200px;
  grid-template-rows: 150px 4rem;
}

Finally, a nested grid container allows the creation of implicit grid tracks. Implicit grid tracks are tracks created automatically by the auto-placement algorithm. This happens when the required definition of grid tracks is missing — for example, when there are more elements to be placed than cells in the grid.

<div class="container">
  <div class="grid-item nested-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

Notice that the nested grid should have only one row, according to its definition. The auto-placement algorithm creates an additional, implicit row to create the required place for a third grid item.

I will discuss more about implicit tracks and auto-placement algorithm in one of my feature articles.

Subgrid value.

As a bonus, I want to tell you about some very promising feature improving the creation of layouts using a nested grid. This feature included in Level 2 of the CSS Grid Layout specification is implemented currently only in Firefox 71 (and up). That’s why here I want to make a preview of all changes that come along with it.

The mentioned feature is an additional ‘subgrid’ value that may be used with grid-template-rows/grid-template-columns properties.

.grid-item.nested-grid {
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

Using subgrid value, the nested grid will inherit grid tracks definition as well as grid-line names, and track gaps from the parent grid in a given dimension. Grid-lines numbers however won’t be inherited.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4];
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: subgrid; 
  ...
}

Notice how the nested grid ‘inherits’ vertical tracks from the parent grid, as well as the gaps between them and line names.

Grid gaps can be overwritten inside the definition of the nested grid.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr); 
  column-gap: 20px;
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: subgrid; 
  column-gap: 50px; 
  ...
}

You can also specify your own grid line names by putting them in square brackets after the subgrid value.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4];
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: subgrid [sub-col-1] [sub-col-2] [sub-col-3]; 
  ...
}

Keep in mind that instead of regular nested grid behavior, the subgrid will prevent the creation of implicit grid tracks in a given dimension.

<div class="container">
  <div class="grid-item nested-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.grid-item.nested-grid {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr; 
  ...
}

As you can see, an additional track for the third element won’t be created, which results in the overlapping of two elements.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: grid-items

Mateusz Kirmuć — Mon, 30 May 2022 11:50:38 +0000

Hello. Today I want to talk about one of the main building blocks of CSS Grid: grid-item elements. Knowing what grid-item elements are and what role they play is necessary to build the most basic layouts using CSS Grid. I hope you will find this content useful. Let’s begin.

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.

Grid-item definition.

Grid-item is an HTML element that is directly nested inside grid-container.

<div class="container">
  <div> <!-- grid-item -->
    <div></div> <!-- not grid-item -->
  </div>
</div>

The grid-item element must be able to contain content (other HTML elements or text). However, some of empty-elements (like <img/> or <input>) also may be treated as grid-item.

<!-- All elements inside this container are grid-items -->
<div class="container">
  <div></div>
  <span></span>
  <img src="..." />
  <input value="..."/>
</div>

What’s important, even another grid can play the role of a grid-item element. These are called nested grids and I will talk about them in one of the future articles.

The default placement of grid-item elements inside the grid.

The grid-item elements must be placed in some organized way inside the grid. Responsible for this is a so-called auto-placement algorithm. Each grid-item is assigned to a separate part of the grid. By default, this grid part is a unique single grid-cell.

Grid-item elements are assigned to cells in a specific order. By default, all cells in the first row from left to right are assigned first. Then the cells from the second row are assigned and so on until all grid-items have been assigned.

Default grid-item alignment inside grid-cell.

By default, the size of the grid-item element is equal to the size of its assigned cell. Grid-item element fills the available space inside the cell.

Custom grid-item placement or alignment.

As mentioned, the previously described grid-item placement/alignment methods are the default methods used by the auto-placement algorithm. However, these methods can be overridden by the developer. Here are the examples:

The developer can assign more than one grid-item to the same grid-cell.
The developer can change the order of assigning grid-items to cells.
The developer can assign a grid-item to a part of the grid larger than a single cell.
The developer can increase or decrease the size of grid-item.
The developer can change the alignment of grid-item inside the cell.

The subject of custom grid-item placement or alignment is a bit more extensive, so I will describe it in more detail in separate articles.

Edge cases.

It should be mentioned that there are some specific cases related to the topic of grid-item that I have not covered in this article. For example:

What happens if you use text or not mentioned empty-elements as grid-item?
What happens if there are more grid-items than cells?

These questions, while important, are beyond the scope of a simple introduction to grid-items. Therefore, I will try to answer them soon when I will discuss more advanced issues related to this subject.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: repeat function — basics

Mateusz Kirmuć — Wed, 25 May 2022 13:38:03 +0000

Hello. Today I want to talk about the last function specific to CSS Grid: repeat function. This simple, yet powerful tool can make your life much easier when building complicated layouts. 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.

Function definition.

The function can be used only as a value of grid-template-columns or grid-template-rows CSS properties. It can be used several times in single property.

grid-template-columns: repeat(...) repeat(...);

The function takes two arguments: positive number or one of two special keywords (auto-fill or auto-fit). The type of the first argument determines the available values for the second argument and the final result. Therefore this article will be dedicated only to the numeric argument. The use of auto-fill and auto-fit keywords is a little more complex subject and deserves a separate article.

grid-template-rows: repeat(10, ...) repeat(5, ...);

The value of the second argument takes exactly the same syntax as the value of grid-template-columns/grid-template-rows CSS properties. This means we can use a combination of any method used to define track size (like length type, percentage, fr unit, sizing keywords, or sizing function) along with grid lines names. You can check out one of my previous articles as a reminder.

grid-template-rows: repeat(3, 1fr 10px 20% auto fit-content(10px));

grid-template-columns: repeat(2, [first] 1px [second, abcd] 1fr);

Resulted value is pretty straightforward: it is the second argument multiplied by the first argument.

grid-template-columns: repeat(3, 1fr 50px);

is equivalent to:

grid-template-columns: 1fr 50px 1fr 50px 1fr 50px;

grid-template-columns: repeat(2, [a] 100px [b] 50px [c]);

is equivalent to:

grid-template-columns: [a] 100px [b] 50px [a, c] 100px [b] 50px [c];

Notice how grid line names are applied to according grid line.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: sizing functions

Mateusz Kirmuć — Mon, 23 May 2022 11:34:27 +0000

Hello. Today I want to talk about CSS Grid sizing functions. This is an alternative way to define grid track size. Together with lengths, fr unit, and sizing keywords, the sizing function creates a comprehensive set of tools dedicated to creating the most challenging layouts. 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.

Fit-content function.

Fit-content is a function that takes one argument of type length or percentage and returns the calculated size of the grid track. Returned size can be equal to either min-content, max-content, passed argument, or available space.

Keep in mind that all of the examples contained in this article has the following CSS definition of grid container:

.container {
    width: 400px;
    height: 400px;
    grid-template-rows: 1fr;
}

When the argument of the fit-content function is smaller than the min-content size, then the size of the grid track will be equal to the min-content.

fit-content(argument) = min-content

when: 

argument < min-content

When the argument is larger than the size of max-content and max-content size is smaller than the available space, the size of the grid track will be equal to max-content.

fit-content(argument) = max-content 

when: 

argument > max-content

and 

max-content < available space

When the argument is smaller than available space and smaller than max-content, then the size of the grid track will be equal to the argument.

fit-content(argument) = argument

when: 

argument < available space

and

max-content > argument

Finally, when both the argument and max-content are larger than the available space, then the size of the grid track will be equal to the available space.

fit-content(argument) = available space

when:

argument > available space

and

max-content > available space

Minmax function.

Minmax is an additional function used for describing grid track size. This function returns the range of sizes that grid track can take depending on the layout. Minmax function accepts two arguments. Grid track size cannot be smaller than the first argument, and larger than the second argument.

The first argument can be one of the following types: length, percentage, or sizing keyword (min-content, max-content, auto). This argument defines the minimum size that a track can take in any possible layout. What’s important, the calculated size of the track can be smaller than the min-content.

The same data types apply to the second argument with an additional flex type (fr unit). This argument defines the maximum size that a track can take in any possible layout. Track size can be as large as the calculated size of the second argument when this size is smaller than the available space. Otherwise, the maximum size of the track will be equal to the available space.

When the second argument size is smaller than the available space, the maximum track size is equal to the argument.

Notice that track size can shrink only to the width described by the first argument (50px). The minimum size here is still less than min-content.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: sizing keywords

Mateusz Kirmuć — Mon, 16 May 2022 15:38:04 +0000

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-colums and 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 me show you some examples showing the difference between the mentioned keywords. Keep in mind that every image contains two containers: container with one min-content grid column on the left and container with one max-content grid column on the right.

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.

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

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.

.container {
    ...
    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.

.container {
    ...
    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.

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

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: fr unit — beyond basics

Mateusz Kirmuć — Mon, 09 May 2022 14:31:02 +0000

Hello. In today's article, I want to extend the knowledge about fr unit contained in my previous post. Here I want to discuss some less common cases related to this subject. I hope you will find it useful.

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.

Fr unit is not allowed in CSS calc function.

Let’s imagine we have a simple layout composed of two vertical and one horizontal grid track. Each column has an equal size of 1fr as in the example below.

Then we came up with the idea, that will be great to shrink one column by 20px, leaving some extra space on the right side of the container.

How can we accomplish this change? One of the potential approaches is the calc function. This is a great method to calculate values using simple math operations. Calc function accepts values of different data types including those representing distance. Let's add something like this:

.grid-container {
    ...
    grid-template-columns: 1fr calc(1fr - 20px);
}

What will happen when we try to use fr unit in the calc function? Unfortunately, the function won’t accept this expression. The reason is the fr unit is not compatible with the length data type (or any other data type that the calc function can accept). Even though it may seem that the fr unit represents the length (part of available space) it cannot be used in the calc function because of the not accepted data type.

Fr unit with indefinite size container

In all examples presented by me so far CSS Grid algorithm has a relatively easy job with calculating flexible track size. All it needs to do was calculate the length of 1fr and then multiply this value by flex factor for every flexible track. However, there is one condition for this to work — container size must be definite. In the case of CSS Grid, this means that the container must have directly specified width or height or at least be a block-level element (the last one concerns only for horizontal axis)*.

Now, let’s consider the case when container size is indefinite. Using the following example I want to show you how the CSS Grid algorithm computes the lengths of flexible columns. Below we have a container with the fixed height, described using display: inline-grid (inline-level element). This container contains a grid with one non-flexible and two flexible columns. Each of the flexible columns contains some text content inside**.

.container {
    display: inline-grid;
    grid-template-columns: 200px 2fr 1fr;
    ...
}

The following image shows what this layout would look like before the space distribution of flexible columns is started. You can notice that the 2fr column isn’t yet twice as large as the 1fr column because so far each flexible column adjusts its width to content.

The size of each text content is fixed and the algorithm will use those values to calculate a length of 1fr. First, it divides each text width with the respective flex factor. Such obtained values are compared and the highest one will be used to represent 1fr.

Finally calculated 1fr value will be used to define the sizes of the flexible columns. Each flexible column will take a width equal to 1fr multiplied by the respective flex factor. Notice that now the middle column is much wider increasing the total width of the container.

Flex factors can be fractions.

It’s important to know that we are not forced to always use integers as flex factors. Flex factors can be fractions. In this case, the process of calculating the width of flexible tracks depends on the sum of all factors. When the sum is greater than 1, this process is similar. First, the length of 1fr is calculated by dividing leftover space by the sum of flex factors. Then, each flexible track receives a size equal to the product of the calculated 1fr value times the respective flex factor. Below is a simple example with one non-flexible and two flexible columns.

.container {
    ...
    grid-template-column: 100px 1.4fr 2.2fr
    width: 400px
}

1fr = leftover space / sum of flex factors

1fr = (400px - 100px) / (1.4 + 2.2)

1fr = 83.33px

However, when the sum of flex factors is less than 1, each flexible track receives a size equal to the product of leftover space times the respective flex factor. There is no need to calculate the length of 1fr. Notice in the example below that the total size of all tracks is less than the size of the container.

.container {
    ...
    grid-template-column: 100px 0.4fr 0.5fr
    width: 400px
}

flexible column width = leftover space * flex factor

The size of a flexible track cannot be smaller than its fixed-size content.

At the end of this article, I want to discuss the relation between the size of the flexible track and its static-size content. Defining grid track as flexible, we assume that it takes some part (or all) of leftover space. However, it’s important to know that in some cases, the flexible track may take more space than we expect. This is happen because a flexible track cannot be smaller than its fixed-size content. Let’s look at the following example.

.container {
    ...    
    grid-template-column: 1fr;
}

As you can see, a flexible column should take all the available space (equal to container width as this layout consists of only 1 column). However, the column contains fixed-size text content which is wider than the available space. Thus, the final width of a flexible column is larger than the container width.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

*By default block-level element occupies the entire horizontal space of its parent element. This not concerns vertical axis. Block-level element without specified height will be indefinite in the vertical axis.

**It’s important to remember that such layout requires that text content is placed inside grid-items, not in grid columns directly. I have chosen not to mention about grid-items to simplify this example.

CSS Grid: fr unit — basics

Mateusz Kirmuć — Tue, 26 Apr 2022 10:10:47 +0000

Hello. Today, I want to talk about some very powerful tool available in the CSS Grid tool belt — fr unit. I was surprised there is so much to talk about, so I decided to split this article into two smaller parts. Today’s part will be dedicated to all the basics that anyone needs to know to understand how fr unit works. In the future part, I want to cover all the edge cases related to this subject.

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.

Grid track

In terms of fr unit definition, it’s important to know what the term grid track means. Grid track in simple words is a column or row in a grid. You may think of it as space between two adjacent grid lines (horizontal or vertical).

As you may recall we define grid using two CSS properties: grid-template-columns/grid-template-rows. This way we specify the size of every track in a grid. Grid track may be flexible when described using fr unit, and non-flexible, when described using any other unit (like px, rem, % etc).

.grid-container {
  ...
  grid-template-columns: 300px 1fr;
}

Fr unit

Fr unit is a special unit available only in CSS Grid, supported in most popular browsers. It is used to determine the size of the grid track and means that the track can take some (or all) of the available free space. Free space is an area not occupied up by any non-flexible grid tracks or gaps. Look at the above example where the right column stretch to all available space left by a non-flexible left column.

Of course, we can use more than one flexible grid track in our grid. Their sizes are calculated by the CSS Grid algorithm. If there are not any non-flexible grid tracks, space is distributed between flexible tracks with specified proportions. To calculate the proportions algorithm use flex factors — the numerical value of the unit (e.g flex factor in ‘3fr’ is 3). Let's look at an example:

.grid-container {
    ...
    grid-template-rows: 1fr 2fr;
}

As you may notice the height of the container is split between two horizontal grid tracks in 1:2 proportion. This means that the lower row takes twice as much space as the upper row (1/3 vs 2/3 of container height). The simple formula shows what part of available space given track will take:

free space fraction = flex factor / sum of all flex factors

What if the grid contains more than one non-flexible grid track along with multiple flexible grid tracks? First, the algorithm calculates available space. It sums up all non-flexible tracks sizes, then subtracts this value from the total size of the container. Finally, available space is split between flexible tracks according to declared proportion. Let’s looks at an example:

.grid-container {
    ...
    grid-template-columns: 100px 5rem 1fr 2fr;
}

In the end, let’s consider some gaps between grid tracks. Available space is additionally reduced by the sum of all gaps. You can see the difference in flexible grid track sizes in the below example. Notice how flexible columns decrease it’s size whereas the size of non-flexible grid tracks stays unchanged.

.grid-container {
    ...
    grid-template-columns: 100px 5rem 1fr 2fr;
    column-gap: 30px;
}

Fr unit vs percent

Some would argue that this new fancy unit is unnecessary as we can achieve the same effect using percents. Well, that's not entirely true. Let’s consider the following example:

To reproduce this example using percents we should use a special CSS calc function. Here’s how it would look like:

.grid-container {
    ...
    grid-template-columns: 200px calc((100% - 200px) * 0.25) calc((100% - 200px) * 0.75);
}

This looks far less readable than using fr units. Moreover, we are forced to manually update flexible calc functions whenever the non-flexible width column changes. The presented example is very simple, but in real-world cases, there may be much more columns, grids, and more complicated proportions to handle. In such circumstances changing one column size, may require several adjustments to restore correct proportions.

What about gaps? How to include them in our calc functions? In the case of fr unit gaps are handled automatically for us, here’s not. Let’s see how columns definition may look:

.grid-container {
    ...
    column-gap: 10px;
    grid-template-columns: 200px calc((100% - 200px - 2 * 10px) * 0.25) calc((100% - 200px - 2 * 10px) * 0.75);
}

As you can see, we need to manually calculate the total gap space and include it in every calc function. Not to mention how easily the proportions of the grid may fall apart if we change gap size or non-flexible column width. In more complicated layouts this may turn into a nightmare.

At the end of this article, it is worth mentioning that we do not have to abandon percentage units in favor of fr. Both units get along pretty well and allow you to create desired layouts. Remember that columns defined using percentages are non-flexible:

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

CSS Grid: defining the grid

Mateusz Kirmuć — Mon, 25 Apr 2022 10:29:08 +0000

Hello. Today’s short post is part of a series in which I try to present to you my knowledge about the CSS Grid tool. So far, I have introduced some basic and general principles about the purpose and operation of this tool. With today’s post, I would like to show some real examples of how to carry out the first stage of creating a layout, i.e. how to define a grid.

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.

Marking an item as a grid container.

The basic operation that must be performed to enable work with the CSS Grid is to mark the selected DOM element as a grid-container. This can be done in CSS using the display property. There are two values this property accepts: grid and inline-grid. The value of the grid means that the future grid-container will be an element of the block type. Similarly, the value of inline-grid means an element of type inline.

Determining the size of the grid.

After marking the selected DOM element as a grid-container, we can proceed to the definition of the grid. The obligatory action here is to determine its size. In my previous post, you can read that a grid is a collection of vertical and horizontal grid-lines that form rows and columns. We define the size of the grid by specifying the width of each column (row) using the grid-template-columns/grid-template-rows properties. In their basic variant, they accept length values corresponding to the widths of respective columns or rows, starting from the left column and the top row.

The width of the columns and rows can be determined by using all known length values that are available in the CSS language (such as px, em,%, etc.). We also have at our disposal special length units, keywords, and functions. These are methods that are only available in CSS Grid, and you can find out more about them in my future posts.

The size of the defined grid may be less than or equal to the size of the containing grid-container. In some circumstances, it is possible to define a grid larger than a container, however, the grid overflows only in the horizontal dimension.

The dimensions of the grid can be fixed or variable. If the width or height is variable, it may depend on the sizes of the container or viewport. We can also limit the variability (or immutability) of the grid dimensions only to a certain range. This is possible thanks to the previously mentioned features available only in CSS Grid.

Giving your own names to grid-lines.

Each grid-line element has a minimum of two default names that are used to identify it. Each default name is unique to a given line. Line names are especially important when defining the grid-areas — necessary elements for the layout creation process. Default names are assigned automatically as consecutive positive numbers (counting from the left and top edge of the grid) or consecutive negative numbers (counting from the right and bottom edge of the grid).

In addition to the names assigned automatically, it is possible to give the lines optional custom names. We can give any number of custom names for each line. Here, the grid-template-columns/grid-template-rows properties will come in handy again. Names are placed in square brackets between the widths of individual columns or rows. They are assigned from the left edge of the grid to the right (for vertical lines) and from the top edge to the bottom (for horizontal lines). Custom names do not have to be unique, we can assign the same names to many lines.

Defining the space between columns/rows.

Finally, I would like to tell you about the possibility of defining gaps between adjacent rows or columns inside the grid. Importantly, we can only define the spaces between columns (rows), not between the edge of the grid and the column (or row).

Gaps are defined with the column-gap/row-gap property. They take a single value that defines the size of the gap described in units of CSS length. In this case, it is not possible to use special CSS Grid length units, keywords, or functions. If we define gaps in both directions at the same time, it is worth using the property gap, which merges the previous two properties into one.

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️