A Beginners Guide To CSS-grid
Published: 2023-03-08 11:10:08



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:

```css
.container{
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cpslmzuj7usriz5yka0.png)

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

For example:

```css
.container {
  grid-template-rows: 100px 100px;
}
```

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


![grid-example-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1cjw350pju79d2ai4p9.png)

    

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:

```css
.container {
  gap: 20px;
}
```

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


![grid-gap-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5gicb1kug68p4h21b7z.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj6ep9s8o40r9ibbf1a6.png)

- **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9j1cgaovxgzdl2on8vb.png)


***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:

```css
.first-child {
  background-color: aqua;
  grid-column: 2/3;
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evfd66cq8ad1pofq2j4g.png)


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

For example:

```css
.first-child {
  grid-row: 2/3;
  grid-column: -4/-3;
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yugo6t317418hmpbz7u.png)


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.

```css
.first-child {
  background-color: aqua;
  grid-column: 1/3;
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0oc6h0s3hoelc66c3c3.png)


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

```css
.first-child {
  background-color: aqua;
  grid-row: 1/3;
}
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqfws562h9fxagoiwuwu.png)


- **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:

```css
.first-child {
  background-color: aqua;
  justify-self: start;
}
```

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

![justify-self-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6dnv8s4l33zkoso8igv.png)


- **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:

```css
.first-child {
  background-color: aqua;
  align-self: end;
}
```

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

![align-self-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rebbtpnpbl43rf4dcn3n.png)


---

## 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.