html

Grid Container in CSS | Explained

A CSS grid is regarded as a layout model that partitions a web page into various rows and columns to arrange elements. These rows and columns help in aligning elements easily rather than using position and float properties. A grid positions elements with respect to either the web page or other elements present on the web page. It consists of various components such as grid containers and grid items. However, we will discuss grid container in this post.

What is a Grid Container

A grid container is a parent element that holds grid items placed within rows, and columns. For the purpose of making an element adopt the behavior of a grid container, set its display property to either grid or inline-grid.

You can make a grid container behave a certain way by utilizing the CSS properties associated with it. These properties are discussed below.

Grid Container Properties

Properties linked to a grid container are described in detail below.

grid-template-columns Property

A grid container is divided into multiple columns with particular sizes, 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 value sets the given value as the width of the columns.

Example
Suppose you want to make four columns each having a specified length, then follow the code below.

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>

For the purpose of making a grid system we have created a div element with the class “container items” that acts as a grid container, meanwhile, the other div elements nested inside it are grid items.

CSS

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

Here we have created four columns each having the width specified in the code above and having a gap of 5px each. Meanwhile, the div has been assigned a sandy brown color and a padding of 10px.

CSS

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

We are now simply styling our grid items using CSS properties.

Output

The property is working properly.

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 value sets the given value as the height of the rows.

Example
Here we are going to demonstrate how to create rows having a certain height.

HTML

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

Here we are creating two rows each having the height specified in the above code. We have also created four columns each having an auto width.

Output

Rows have been generated successfully.

justify-content Property

For the purpose of aligning the entire grid within a container horizontally, the justify-content property is used. Remember that, in order for this property to work the total width of the grid should be less than that of the container.

Syntax

justify-content: start | end | center | space-between | space-around | space-evenly | stretch | initial | inherit;

Parameters explained
start: It positions the grid at the start of the container and is the default value.

end: This places the grid at the last of the container.

center: This positions the grid at the middle of the container.

space-between: It adds an equal amount of space between columns.

space-around: It adds an equal space around columns.

space-evenly: This adds an equal space around and between columns.

stretch: It alters the size of items allowing the grid to cover the full width of the container.

Example
Suppose you want to add space between the columns inside a grid container.

CSS

.container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 40px 40px 40px;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

In the above code, in order to make the grid smaller than the container we are making three columns of 40px each and to add space between these columns we are using the space-between value of the justify-content property.

Output

Space has been added between columns.

align-content Property

In order to align the entire grid within a container vertically, the align-content property is used. Remember that, in order for this property to work the total height of the grid should be less than that of the container.

Syntax

align-content: start | end | center | space-between | space-around | space-evenly | stretch | initial | inherit;

Parameters explained
start: It positions the rows at the start of the container and is the default value.

end: This positions the rows at the end of the container.

center: This positions the grid at the middle of the container.

space-between: It adds an equal amount of space between rows.

space-around: It adds an equal space around rows.

space-evenly: This adds an equal space around and between rows.

stretch: It alters the size of items allowing the grid to cover the full height of the container.

Example
Suppose you want to add space between rows inside a container.

CSS

.container {
  display: grid;
  height: 350px;
  align-content: space-between;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
  background-color: sandybrown;
  padding: 10px;
}

To add space between rows we are first of all providing some height to the grid and then using the space-between value of the align-content property we are adding space between rows. Moreover, we have created three columns each with an auto width.

Output

Space has been added between rows.

Conclusion

A grid container is a parent element that holds grid items placed within rows, and columns. For the purpose of making an element adopt the behavior of a grid container display it as either grid or inline-grid. A grid container can attain certain characteristics through the usage of certain CSS properties associated with it such as justify-content, grid-template-columns, align-content, and grid-template-rows. Each of these properties has been explained in the article 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.