Learn CSS: Grid

Key Concepts

Review core concepts you need to learn to master this subject

Grid Template Columns

fr Relative Unit

Grid Gap

CSS Block Level Grid

CSS grid-row

CSS Inline Level Grid

CSS minimax() Function

grid-row-start & grid-row-end

Grid Template Columns

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).

fr Relative Unit

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used with along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.

Grid Gap

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-gap property is a shorthand way of setting the two properties grid-row-gap and grid-column-gap. It is used to determine the size of the gap between each row and each column. The first value sets the size of the gap between rows and while the second value sets the size of the gap between columns.

CSS Block Level Grid

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a block-level grid container use display: grid property/value. The nested elements inside this element are called grid items.

CSS grid-row

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-row property is shorthand for the grid-row-start and grid-row-end properties specifying a grid item’s size and location within the grid row. The starting and ending row values are separated by a /. There is a corresponding grid-column property shorthand that implements the same behavior for columns.

CSS Inline Level Grid

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a inline-level grid container use display: inline-grid property/value. The nested elements inside this element are called grid items.

The difference between the values inline-grid and grid is that the inline-grid will make the element inline while grid will make it a block-level element.

CSS minimax() Function

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS Grid minimax() function accepts two parameters. The first parameter is the minimum size of a row or column and the second parameter is the maximum size.

The grid must have a variable width for the minimax() function.

If the maximum value is less than the minimum, then the maximum value is ignored and only the minimum value is used.

The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.

grid-row-start & grid-row-end

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-row-start and grid-row-end properties allow single grid items to take up multiple rows. The grid-row-start property defines on which row-line the item will start. The grid-row-end property defines how many rows an item will span, or on which row-line the item will end. The keyword span can be used with either property to automatically calculate the ending value from the starting value or vice versa. There are complementary grid-column-start and grid-column-end properties that apply the same behavior to columns.

CSS grid-row-gap

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-row-gap property determines the amount of blank space between each row in a CSS grid layout or in other words, sets the size of the gap (gutter) between an element’s grid rows. The grid-column-gap provides the same functionality for space between grid columns.

CSS grid-area

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-area property specifies a grid item’s size and location in a grid layout and is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end in that order. Each value is separated by a /.

In the included example, Item1 will start on row 2 and column 1, and span 2 rows and 3 columns

Align Self

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS align-self property is used to set how an individual grid item positions itself along the column or block axis. By default grid items inherit the value of the align-items property on the container. So if the align-self value is set, it would over-ride the inherited align-items value.

The value start positions grid items on the top of the grid area.

The value end aligns the grid on the bottom of the grid area.

The value center positions grid items on the center of the grid area.

The value stretch positions grid items to fill the grid area (default).

Justify Items

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The justify-items property is used on a grid container. It’s used to determine how the grid items are spread out along a row by setting the default justify-self property for all child boxes.

The value start aligns grid items to the left side of the grid area.

The value end aligns grid items to the right side of the grid area.

The value center aligns grid items to the center of the grid area.

The value stretch stretches all items to fill the grid area.

CSS grid-template-areas

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-template-areas property allows the naming of sections of a webpage to use as values in the grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties. They specify named grid areas within a CSS grid.

CSS grid-auto-flow

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-auto-flow property specifies whether implicity-added elements should be added as rows or columns within a grid or, in other words, it controls how auto-placed items get inserted in the grid and this property is declared on the grid container.

The value row specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default).

The value column specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements.

The value dense invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added.

Justify Content

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

Sometimes the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property justify-content can be used to position the entire grid along the row or inline axis of the grid container.

The value start aligns the grid to the left side of the grid container.

The value end aligns the grid to the right side of the grid container.

The value center centers the grid horizontally in the grid container.

The value stretch stretches the grid items to increase the size of the grid to expand horizontally across the container.

The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.

The value space-between includes an equal amount of space between grid items and no space at either end.

The value space-evenly places an even amount of space between grid items and at either end.

Align Content

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

Some times the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property align-content can be used to position the entire grid along the column axis of the grid container.

The property is declared on the grid container.

The value start aligns the grid to the top of the grid container.

The value end aligns the grid to the bottom of the grid container.

The value center centers the grid vertically in the grid container.

The value stretch stretches the grid items to increase the size of the grid to expand vertically across the container.

The value space-between includes an equal amount of space between grid items and no space at either end.

The value space-evenly places an even amount of space between grid items and at either end.

CSS grid-auto-rows

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-auto-rows property specifies the height of implicitly added grid rows or it sets a size for the rows in a grid container. This property is declared on the grid container. grid-auto-columns provides the same functionality for columns. Implicitly-added rows or columns occur when there are more grid items than cells available.

Justify Self

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS justify-self property is used to set how an individual grid item positions itself along the row or inline axis. By default grid items inherit the value of the justify-items property on the container. So if the justify-self value is set, it would over-ride the inherited justify-items value.

The value start positions grid items on the left side of the grid area.

The value end positions the grid items on the right side of the grid area.

The value center positions grid items on the center of the grid area.

The value stretch positions grid items to fill the grid area (default).

CSS grid-area

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The CSS grid-area property allows for elements to overlap each other by using the z-index property on a particular element which tells the browser to render that element on top of the other elements.

Align Items

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

The align-items property is used on a grid container. It’s used to determine how the grid items are spread out along the column by setting the default align-self property for all child grid items.

The value start aligns grid items to the top side of the grid area.

The value end aligns grid items to the bottom side of the grid area.

The value center aligns grid items to the center of the grid area.

The value stretch stretches all items to fill the grid area.

CSS Grid Essentials

Lesson 1 of 2

1
Using CSS, you can elegantly lay out elements on a web page. There is no simple answer for how best to do this — depending on what content you are trying to display, multiple different techni…
2
To set up a grid, you need to have both a grid container and grid items. The grid container will be a parent element that contains grid items as children and applies overarching styling and pos…
3
By default, grids contain only one column. If you were to start adding items, each item would be put on a new row; that’s not much of a grid! To change this, we need to explicitly define the number…
4
We’ve learned how to define the number of columns in our grid explicitly. To specify the number and size of the rows, we are going to use the property grid-template-rows. This property is almost i…
5
The property grid-template can replace the previous two CSS properties. Both grid-template-rows and grid-template-columns are nowhere to be found in the following code! .grid { display: grid; …
6
You may already be familiar with several types of responsive units such as percentages (%), ems and rems. CSS Grid introduced a new relative sizing unit — fr, like fraction. By using the f…
7
The properties that define the number of rows and columns in a grid can take a function as a value. repeat() is one of these functions. The repeat() function was created specifically for CSS Grid. …
8
So far, all of the grids that we have worked with have been a fixed size. The grid in our example has been 400 pixels wide and 500 pixels tall. But sometimes you might want a grid to resize based o…
9
In all of our grids so far, there hasn’t been any space between the items in our grid. The CSS properties grid-row-gap and grid-column-gap will put blank space between every row and column in the …
10
In this lesson, we have learned how to define a grid container. When explicitly defining a grid, you have to declare the quantity of rows and columns and their respective sizes. In all of our exa…
11
Using the CSS properties grid-row-start and grid-row-end, we can make single grid items take up multiple rows. Remember, we are no longer applying CSS to the outer grid container; we’re adding CSS …
12
We can use the property grid-row as shorthand for grid-row-start and grid-row-end. The following two code blocks will produce the same output: .item { grid-row-start: 4; grid-row-end: 6; } .it…
13
The previous three properties also exist for columns. grid-column-start, grid-column-end and grid-column work identically to the row properties. These properties allow a grid item to span multiple …
14
We’ve already been able to use grid-row and grid-column as shorthand for properties like grid-row-start and grid-row-end. We can refactor even more using the property grid-area. This property will …
15
At this point, we’ve covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts. * grid-template-columns defines the number and sizes of t…

1
In the previous lesson, you learned all the foundational properties necessary to create a two-dimensional grid-based layout for your web pages! In this lesson, you’ll learn the following additional…
2
The grid-template-areas property allows you to name sections of your web page to use as values in the grid-row-start, grid-row-end, grid-col-start,grid-col-end, and grid-area properties. We…
3
Another powerful feature of CSS Grid Layout is the ability to easily overlap elements. When overlapping elements, it is generally easiest to use grid line names and the grid-area property. …
4
We have referred to “two-dimensional grid-based layout” several times throughout this course. There are two axes in a grid layout — the column (or block) axis and the row (or inline) ax…
5
In the previous exercise, we learned how to position elements within their columns. In this exercise, we will learn how to position a grid within its parent element. We can use justify-content to…
6
In the previous two exercises, we learned how to position grid items and grid columns from left to right across the page. Below, we’ll learn how to position grid items from top to bottom! align-i…
7
In the previous exercise, we positioned grid items within their rows. align-content positions the rows along the column axis, or from top to bottom. It accepts these positional values: * start…
8
The justify-items and align-items properties specify how all grid items contained within a single container will position themselves along the row and column axes, respectively. justify-self spe…
9
So far, we have been explicitly defining the dimensions and quantities of our grid elements using various properties. This works well in many cases, such as a landing page for a business that will …
10
CSS Grid provides two properties to specify the size of grid tracks added implicitly: grid-auto-rows and grid-auto-columns. grid-auto-rows specifies the height of implicitly added grid rows. gri…
11
In addition to setting the dimensions of implicitly-added rows and columns, we can specify the order in which they are rendered. grid-auto-flow specifies whether new elements should be added to r…
12
Great work! You have learned many new properties to use when creating a layout using CSS Grid! Let’s review: grid-template-areas specifies grid named grid areas grid layouts are two-dimension…

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Key Concepts

Grid Template Columns

fr Relative Unit

Grid Gap

CSS Block Level Grid

CSS grid-row

CSS Inline Level Grid

CSS minimax() Function

grid-row-start & grid-row-end

CSS grid-row-gap

CSS grid-area

Align Self

Justify Items

CSS grid-template-areas

CSS grid-auto-flow

Justify Content

Align Content

CSS grid-auto-rows

Justify Self

CSS grid-area

Align Items

What you'll create

CSS Grid: PupSpa

CSS Grid: Task Board

CSS Grid: Architecture Blog

How you'll master it

CSS Grid

CSS Grid

Learn CSS: Grid