DEV Community

Cover image for A Beginners Guide To CSS-grid
Elizabeth ⚡
Elizabeth ⚡

Posted on

A Beginners Guide To CSS-grid

Until 2011 when CSS-grid was first introduced, it wasn't easy to build two-dimensional layouts cause the available properties were only good enough for building one-dimensional layouts.

The main idea behind CSS-grid was that a web developer could divide the child elements in a container into rows and columns to create a two-dimensional layout.

In this article, you’ll learn:

  • The definition of CSS-grid
  • How to set up a grid-container
  • The basic properties of a Grid-container and,
  • The basic properties of Grid-elements

What is CSS-grid?

CSS-grid is a CSS property that divides the child elements in a container into rows and columns, in order to create a two-dimensional layout.

Setting up a grid-container

To get started with CSS-grid, we need to, first of all, create the grid-container. To create a grid container all we have to do is to set the display of the container to grid(this won’t have any visual effect on the container).

The basic properties of a grid-container

In this section, you'll learn about the basic grid properties applied directly to the grid container and how they work.

The basic structure of a CSS-grid layout consists of a grid container and grid items. We've already learned how to create a grid container using the display: grid property, now the items are placed inside the container using the grid-template-columns and grid-template-rows properties.

  • Grid-template-columns: This divides the child elements into columns and specifies the width of each column in the container element.

For example:

.container{
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
Enter fullscreen mode Exit fullscreen mode

The code block above gives the first three child elements a width of 200px and puts them side by side, as shown in the image below.

grid-example

  • Grid-template-rows: This property specifies the height of the rows in the grid-container.

For example:

.container {
  grid-template-rows: 100px 100px;
}
Enter fullscreen mode Exit fullscreen mode

The code block above gives a 100px of height to each of the rows, as shown in the image below.

grid-example-2

In summary, the grid-template-column is used to specify the width, while the grid-template-rows is used to specify the height of the child elements.

To create space between the elements we need the gap property.

  • Gap: The gap property is used to create space between the elements.

For example:

.container {
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

The above code creates space between the elements, as shown in the image below.

grid-gap-example

If you only need space between the elements horizontally or vertically you can reach out for the row-gap or column-gap property.

  • Row-gap: The row-gap property creates horizontal space between the rows
  • Column-gap: The column-gap creates space between the elements vertically

To align the child elements inside the grid container, whether horizontally or vertically we use the justify-items and align-items properties.

  • Justify-items: This property is used to justify the grid items(child elements) along the row axis(horizontally). The possible values:
    • start: The grid items are aligned horizontally to the beginning of the columns.
    • end: The grid items are aligned horizontally to the far edge of the column.
    • center: The grid items are aligned horizontally to the middle of the columns.
    • stretch: Default

For example:

justify-content-example

  • Align-items: This property is similar to the “Justify-items”. The only difference is that it works in the opposite direction (vertical direction), which aligns items along the row axis. The possible values are:
    • start: The grid items are aligned vertically to the top.
    • end: The grid items are aligned vertically to the bottom.
    • center: The grid items are aligned vertically to the middle.
    • stretch: (default).

For example:

align-content-example

Justify-content & Align-content:

These properties control the alignment of grid columns and rows. It is set on the grid container and only applies if the container is larger than the grid. It does not control the alignment of grid items. The justify-items *and *align-items property control that.

The basic properties of Grid-elements

Here you’ll learn about the CSS-grid properties applied directly to the grid items.

  • Grid-column: Each grid element has a specific cell with a specific cell number. The grid-column property is used to place grid items into a particular cell using the cell number; it can also span a grid across multiple cells.

For example:

.first-child {
  background-color: aqua;
  grid-column: 2/3;
}
Enter fullscreen mode Exit fullscreen mode

The above code places the first child in the container's second column, which has the cell-column-number 2 and 3, as shown in the image below.

grid-cells-example

  • Grid-row: This property places a child element in a specific row.

For example:

.first-child {
  grid-row: 2/3;
  grid-column: -4/-3;
}
Enter fullscreen mode Exit fullscreen mode

The above code places the first-child element in the cell with row numbers 2 and 3 and then in the column cell with the column numbers -4 and -3, as shown in the image below.

grid-cells-example-2

The grid-column and grid-row properties can also be used to span elements across multiple rows and columns as mentioned before. Let’s see how that works.

.first-child {
  background-color: aqua;
  grid-column: 1/3;
}
Enter fullscreen mode Exit fullscreen mode

The code block above will span the “first-child” element from columns 1 to 3, as shown in the image below.

grid-cells-example-3

The grid row can also be used to span elements but vertically.

.first-child {
  background-color: aqua;
  grid-row: 1/3;
}
Enter fullscreen mode Exit fullscreen mode

The code block above will span the “first-child” element from rows 1 to 3, as shown in the image below.

grid-cells-example-4

  • Justify-self: This property overwrites the justify-items and is applied directly to the child element to position it to the start, center, or end, and by default, stretch.

For example:

.first-child {
  background-color: aqua;
  justify-self: start;
}
Enter fullscreen mode Exit fullscreen mode

The above code sets the first-child element to start on the horizontal axis, as shown in the image below.

justify-self-example

  • Align-self: This property does the same as the justify-self, just in the opposite direction(vertically). It overwrites the align-items and is applied directly to the child element to position it to the start, center, or end, and by default, stretch.

For example:

.first-child {
  background-color: aqua;
  align-self: end;
}
Enter fullscreen mode Exit fullscreen mode

The above code sets the first-child element to end on the vertical axis, as shown in the image below.

align-self-example

Conclusion

A common misconception beginners have is that the CSS grid was made to replace flex-box, but that’s not true. They work perfectly together. Need a one-dimensional layout, use flex-box, and if you need a two-dimensional structure, reach out for CSS-grid.

This overview does not contain all the grid properties, there’s a tremendous amount of grid properties, and it won’t be discussed in this article because it would be too confusing for beginners. This is an overview of the most important CSS-grid properties.

Top comments (2)

Collapse
 
pulimoodan profile image
Akbar Ali •

Actually I was coding css for about 4 years and always use grid-[column/row]-gap until I realized that it's been deprecated as the new way is [column/row]-gap. Thanks for reminding me that again.

Also grid-gap -> gap

Collapse
 
elizabethekete profile image
Elizabeth ⚡ • • Edited

You’re welcome