---
title: CSS Grid Container
description: "1 2 3 4 5 6 7 8 ## Grid Container To make an HTML element behave as a grid container, you have to set the `display` property to `grid` or `inline-grid`. Grid containers consist of grid items, placed inside columns and rows. --- ##…"
url: "https://apprentice.mn/docs/css-grid-container/"
updated: "2021-05-13"
category: CSS
---

# CSS Grid Container

1 2 3 4 5 6 7 8

## Grid Container

To make an HTML element behave as a grid container, you have to set the `display` property to `grid` or `inline-grid`.

Grid containers consist of grid items, placed inside columns and rows.

---

##  

## The grid-template-columns Property

The `grid-template-columns` property defines the number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated-list, where each value defines the width of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or “auto” if all columns should have the same width.

### Example

Make a grid with 4 columns:

      `.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}`

The `grid-template-columns` property can also be used to specify the size (width) of the columns.

### Example

Set a size for the 4 columns:

              `.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}`

## The grid-template-rows Property

The `grid-template-rows` property defines the height of each row.

               1 2 3 4 5 6      `.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}`

## The justify-content Property

The `justify-content` property is used to align the whole grid inside the container.

       1 2 3 4 5 6      **Note:** The grid’s total width has to be less than the container’s width for the `justify-content` property to have any effect.

### Example

     `.grid-container {
  display: grid;
  justify-content: space-evenly;
}`

### Example

     `.grid-container {
  display: grid;
  justify-content: space-around;
}`

### Example

     `.grid-container {
  display: grid;
  justify-content: space-between;
}`

### Example

             `.grid-container {
  display: grid;
  justify-content: start;
}`

### Example

             `.grid-container {
  display: grid;
  justify-content: end;
}`

## The align-content Property

The `align-content` property is used to *vertically* align the whole grid inside the container.

### Example

     `.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}`

### Example

             `.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}`

### Example

             `.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}`

### Example

     `.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}`

### Example

             `.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}`

### Example

             `.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-grid-container%2F&linkname=CSS%20Grid%20Container)[https://www.addtoany.com/share](https://www.addtoany.com/share)