html

CSS Grid Properties | Explained

CSS Grid is a layout model that allows an easy arrangement of elements appearing on a website into various rows and columns. This model works by partitioning a web page into sections and aligns elements without having to go through the trouble of using positioning and floats. To use this model there are numerous CSS properties available which we have explained in-depth in this post.

CSS Grid Properties

Properties associated with the grid layout module are explained below.

grid-template-columns Property

As we know that a grid layout consists of numerous columns that have a certain size, therefore, to state the number of columns and their widths, the grid-template-columns property is used.

Syntax

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

Parameters explained
none: It is a default value that generates columns when required.

auto: This value evaluates the width of columns based on the container size and items’ content size present inside a column.

max-content: It adjusts the column width based on the biggest item in the column.

min-content: It adjusts the column width based on the tiniest item in the column.

length: This sets the given value as the width of the columns.

Example
Suppose you want to make four columns each having a length specified in the code. Here is how you do it.

HTML

<div class="container items">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>  
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
  <div class="seven">7</div>
  <div class="eight">8</div>
</div>

In the above code, to make a grid container we have created a div element having class “container items” and to place certain grid items inside that container we have nested eight div elements inside the grid container div.

CSS

.container {
  display: grid;
  grid-template-columns: 70px 70px 70px auto;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

Here we are setting the display of the div element with the class “container” to grid in order to make it a grid container. Then we are making four columns with the first three columns having a length of 70px, whereas, the width of the last column is set to auto. Each column has a gap of 5px and a sandybrown color. Lastly, the padding of the container is set to 10px.

CSS

.items > div {
  background-color: bisque;
  padding: 20px;
  text-align: center;
  font-size: 35px;
}

Now using some basic CSS properties we are styling our items that are present inside the container.

Output

Four columns having a certain width have been created.

grid-template-rows Property

A grid system also consists of certain rows, therefore, to specify the number of rows along with their height, the grid-template-rows property is used.

Syntax

grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

Parameters explained
none: It is a default value that generates rows when required.

auto: This value evaluates the height of the rows based on the container size and items’ content size present inside a row.

max-content: It adjusts the row height based on the biggest item in the row.

min-content: It adjusts the row height based on the tiniest item in the row.

length: This sets the given value as the height of the rows.

Example
Suppose you want to create two rows having a specified height then follow the code below.

HTML

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 150px 250px;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, we have generated two rows. The first row has a height of 150px, meanwhile, the second has a height of 250px. Apart from this, we have also created four columns, each with an auto width having a gap of 5px.

Output

Two rows having a specified height have been created.

grid-template-areas Property

For the purpose of specifying the name of areas in a grid system, the grid-template-areas property is used. It works in a way that you have to name the area using the grid-area property and then reference that name in this property.

Syntax

grid-template-areas: none | item-name;

Parameters explained
none: It is a default value that does not specify any name for the grid area.

item-name: This value represents a sequence of how rows and columns in a grid will be displayed.

Example
Here is how this property works.

CSS

.one {
  grid-area: itemA;
}
.container {
  display: grid;
  grid-template-areas: 'itemA itemA. . .';
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, using the grid-area property we are assigning the first item of the grid a name “itemA” and afterward referencing this name in the grid-template-areas property that specifies that the first item has the name “itemA” and will take up space of two columns out of five.

Output

The property is working properly.

grid-template Property

It is a shorthand property for the properties mentioned below.

  1. grid-template-columns
  2. grid-template-rows
  3. grid-template-areas

Syntax

grid-template: none | grid-template-rows/grid-template-column | grid-template-areas | initial | inherit;

Parameters explained
none: It is a default value that does not specify any size of rows and columns.

grid-template-columns: It states the size of columns.

grid-template-rows: It defines the size of rows.

grid-template-areas: It states the names of grid areas.

Example
Let’s assign the number and size of rows and columns all at once.

CSS

.container {
  display: grid;
  grid-template: 200px/ auto auto auto;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, it has been specified that there are two rows with row 1 having a height of 200px, and three columns with an auto width for each column.

Output

The property has been implemented successfully..

grid-row-start Property

As the name suggests, this property states in which row the grid item will start displaying.

Syntax

grid-row-start: auto |row-line;

Parameters explained
auto: This is a default value that places items according to the flow of the grid.

row-line: It states on which row the item will start showing.

Example
Consider the example below to understand the working of this property.

CSS

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}
.three {
  grid-row-start: 1;
}

In the above code, we are first of all specifying three columns each with width of 200px and then stating that the third item will start displaying in row 1.

Output

Item 3 has been placed at the start of row 1.

grid-column-start Property

To specify in which column the grid item will start displaying, the grid-column-start property is used.

Syntax

grid-column-start: auto | span-n | column-line;

Parameters explained
auto: This is a default value that places items according to the flow of the grid.

span-n: It states the number of columns the item shall span.

column-line: It defines on which column the item will begin showing.

Example
Suppose you want to place a specific grid item on a specific column.

CSS

.one {
  grid-column-start: 2;
}

Here we are using the grid-column-start property and placing item 1 in column 2.

Output

Item 1 has been successfully placed in column 2.

grid-row-end Property

This property states on which row the grid item will end displaying, or the number rows a grid item will span.

Syntax

grid-row-end: auto | span-n | row-line;

Parameters explained
auto: This is a default value that makes an item span a single row only.

span-n: It states the number of rows the item shall span.

row-line: It defines on which row the item will end displaying.

Example
Consult the example below.

.one {
  grid-row-end: span 2;
}

In the above code, we are making item 1 span across 2 rows by using the grid-row-end property.

Output

The item has successfully been spanned across two rows.

grid-column-end Property

This property states on which column the grid item will end displaying, or the number columns a grid item will span.

Syntax

grid-column-end: auto | span-n | column-line;

Parameters explained
auto: This is a default value that makes an item span a single column only.

span-n: It states the number of columns the item shall span.

column-line: It defines on which column the item will end up displaying.

Example
Here we are making an element span across two columns.

CSS

.one {
  grid-column-end: span 2;
}

The above code states that item 1 will span across two columns.

Output

Item 1 is spanning across two columns.

grid-area Property

This property is used to define the location and size of a grid item or give a certain name to a grid item which is then referred to by the grid-template-areas property. Furthermore, it is a shorthand property for the properties mentioned below.

  1. grid-row-start
  2. grid-row-end
  3. grid-column-start
  4. grid-column-end

Syntax

grid-area: row-start / column-start / row-end / column-end | item-name;

Parameters explained
grid-row-start: This value states where to start displaying an item in a row.

grid-column-start: It states where to start displaying an item in a column.

grid-row-end: It describes where to stop showing items in a row, or how many rows to span.

grid-column-end: It describes where to stop showing items in a column, or how many columns to span.

item-name: This value states the grid item name.

Example
To understand the working of this property consider the following example.

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}
.seven {
  grid-area: 1 / 2 / span 3 / span 2;
}

The above code states that there are four columns each with an auto width. Meanwhile, the seventh item in the grid will be placed in the first row, and second column, and span 3 rows, and 2 columns.

Output

The property was implemented successfully.

grid-auto-columns Property

This property provides a certain size to the columns of a grid layout.

Syntax

grid-auto-columns: auto | max-content | min-content | length;

Parameters explained
auto: This default value evaluates the size of columns based on the container size.

max-content: It adjusts the column size based on the biggest item in the column.

min-content: It adjusts the column size based on the tiniest item in the column.

length: This value sets the given value as the size of the columns.

Example
Consider the example below.

CSS

.one {
  grid-area: 1 / 1 / 2 / 2;
}

Before utilizing this property you have to first assign locations to each of your grid items using the grid-area property. For instance in the code above, we have specified that item 1 will be placed at the start of row 1 and column 1, and at the end of row 2, and column 2. Now the locations of the rest of the items are assigned in a similar pattern.

CSS

.two {
  grid-area: 1 / 2 / 2 / 3;
}
.three {
  grid-area: 1 / 3 / 2 / 4;
}
.four {
  grid-area: 2 / 1 / 3 / 2;
}
.five {
  grid-area: 2 / 2 / 3 / 3;
}
.six {
  grid-area: 2 / 3 / 3 / 4;
}

The rest of the grid items are also assigned some location using the grid-area property.

CSS

.container {
  display: grid;
  grid-auto-columns: 200px;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

Now using the property under discussion, the size of the columns is set to 200px.

Output

The property has been implemented.

grid-auto-rows Property

This property provides a certain size to the rows of a grid layout.

Syntax

grid-auto-rows: auto | max-content | min-content | length;

Parameters explained
auto: This default value evaluates the size of rows based on the container size.

max-content: It adjusts the row size based on the biggest item in the row.

min-content: It adjusts the row size based on the tiniest item in the row.

length: This value sets the given value as the size of the rows.

Example
Let’s give a certain size to the rows in the container using the property under discussion.

CSS

.one { grid-area: 1 / 1 / 2 / 2; }
.two { grid-area: 1 / 2 / 2 / 3; }
.three { grid-area: 1 / 3 / 2 / 4; }
.four { grid-area: 2 / 1 / 3 / 2; }
.five { grid-area: 2 / 2 / 3 / 3; }
.six { grid-area: 2 / 3 / 3 / 4; }

.container {
  display: grid;
  grid-auto-rows: 200px;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

Just like the grid-auto-columns property we have to first assign locations to the grid items using the grid-area property and then using the grid-auto-rows property the size of rows has been set to 200px.

Output

Each row has been assigned a size successfully.

grid-auto-flow Property

This property handles how auto-positioned grid items will be placed inside the container.

Syntax

grid-auto-flow: row | column | dense | row dense | column dense;

Parameters explained
row: This default value places items filling all rows.

column: This values places items filling all columns.

dense: This value fills spaces in the grid by placing items in those spaces.

row dense: It places items filling all rows leaving no holes in the grid.

column dense: It places items filling all columns leaving no holes in the grid.

Example
Suppose you want to place your grid items filling each column.

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, first of all we have created four columns each with an auto width, then we generated two rows each with auto height. Afterward, we are using the grid-auto-flow property to place items filling each column.

Output

The property is working properly.

grid-row Property

For the purpose of defining the position and size of a grid item, the grid-row property is used. Moreover, it is a shorthand property for the following properties.

  1. grid-row-start
  2. grid-row-end

Syntax

grid-row: grid-row-start / grid-row-end;

Parameters explained
grid-row-start: It states on which row the item will start showing.

grid-row-end: It defines on which row the item will end up showing.

Example
Here is an example of this property.

CSS

.two {
  grid-row: 1 / span 2;
}

In the above code we have stated that item 2 will be placed in row 1 and span across 2 rows. Meanwhile, the grid has four columns each with an auto width.

Output

The shorthand property has been implemented properly.

grid-column Property

In order to describe the position and width of a grid item, the grid-row property is used. Moreover, it is a shorthand property for the properties listed here.

  1. grid-column-start
  2. grid-column-end.

Syntax

grid-column: grid-column-start / grid-column-end;

Parameters explained
grid-column-start: It states on which column the item will start showing.

grid-column-end: It defines on which column the item will end up showing.

Example
Here is an example of this property.

CSS

.one {
  grid-column: 2 / span 2;
}

The code above states that item 1 will be placed in column 2 and will span across 2 columns.

Output

The property is working properly.

row-gap Property

As the name suggests, the row-gap property specifies the gap between grid rows.

Syntax

row-gap: length | normal | initial | inherit;

Parameters explained
length: It states the gap between rows.

normal: It defines a normal gap between rows and is a default value.

Example
Consult the example below to understand this property.

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 60px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, we have specified that the gap between each row will be 60px.

CSS

.items > div {
  background-color: bisque;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
  font-size: 35px;
}

This code is the same as above with the only difference that to demonstrate the concept of gap between rows properly we have added borders to the items inside the grid.

Output

Gap between rows have been implemented successfully.

column-gap Property

This property states the gap between grid columns.

Syntax

column-gap: length | normal | initial | inherit;

Parameters explained
length: It states the gap between columns.

normal: It defines a normal gap between columns and is a default value.

Example
Let’s add a specified gap between columns inside a grid.

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 60px;
  background-color: sandybrown;
  padding: 10px;
}

Here we have added a gap of 60px between each column.

Output

Gap between columns was added.

gap Property

To specify the gap between rows and columns all at once, the gap property is used. It is a shorthand property for the follows.

  1. row-gap
  2. column-gap

Syntax

gap: row-gap column-gap;

Parameters explained
row-gap: It adds a gap between rows.

column-gap: It adds a gap between columns.

Example
Let’s set some gap between rows and columns all at once.

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 65px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, we have specified that there will be a gap of 65px between each row, and each column.

Output

The property is working properly.

Conclusion

CSS Grid is a layout model that allows an easy arrangement of elements appearing on a website into various rows and columns. There are numerous properties associated with it such as, grid-template-columns, grid-template-rows, grid-column, grid-row, grid-area, etc. Each of these properties serve a different purpose which we have explained in this post along with relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.