html

Grid Container Properties in CSS | Explained

CSS provides a Grid Layout model that makes it possible to create a two-dimensional layout on a website. The two-dimensional behavior of the CSS Grid enables the alignment of the grid’s items in rows and columns. CSS Grid Container properties can be used to achieve different functionalities such as content alignment, item alignment, etc.

This article will provide a comprehensive guide for the grid container and in this regard, it will cover the following fundamental concepts of grid container:

So, let’s begin!

What is a Grid Container?

A grid container is a box/container that contains grid items and can place these items within the rows and columns.

The Display Property

To create a grid container, we need to utilize the display property and set its value as either inline-grid or grid. The below snippet shows the basic syntax of display property:

display: value;

Example 1

In the below-given code snippet, we will create a grid container and within container we will declare five child elements:

<div class="container-class">
  <div class="item-class">First Item</div>
  <div class="item-class">Second Item</div>
  <div class="item-class">Third Item</div>  
  <div class="item-class">Fourth Item</div>
  <div class="item-class">Fifth Item</div>
  <div class="item-class">Sixth Item</div>  
</div>

The respective style classes for grid container and grid items will be like this:

<style>
.container-class {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: green;
  padding: 10px;

}
.item-class {
  background-color:lightgreen;
  border: 2px solid green;
  padding: 30px;
  font-size: 30px;
  text-align: center;
}
</style>

The above code snippet will show the following output:

The output verifies that both grid container and grid items are styled according to their respective style classes.

Grid Container Properties in CSS

The table given below will provide a brief guide for the grid container properties:

Properties Description
grid-template-columns & grid-template-rows Determine the size of columns and rows within a grid container and these properties can take a list of space-separated values e.g. tack-size, line-name.
grid-template-areas It determines how to show rows and columns by using named grid items.
grid-template It is a shorthand property used to achieve the functionalities of three properties, i.e., grid-template-columns, grid-template-rows, and grid-areas.
row-gap & column-gap These properties determine the gap between the grid rows and grid columns respectively.
grid-column-gap & grid-row-gap These properties are used to specify the size of the gap between the grid columns and grid rows, respectively.
grid-gap It is a shorthand property used to achieve the functionalities of two properties i.e. grid-column-gap & grid-row-gap
justify-items It aligns the items of the grid along the rows/inline axis.
align-items It aligns the items of the grid along the columns/inline axis.
place-items It is a shorthand property for align-items and justify-items properties, which sets both in a single declaration.
justify-content It aligns the grid along the rows/inline axis
align-content It aligns the grid along the columns/block axis
place-content It is a shorthand property for align-content and justify-content.
grid-auto-columns It determines the default size for the columns.
grid-auto-rows It defines the default size for the rows.
grid-auto-flow It determines how auto-placed items are added in the CSS Grid.
grid It is a shorthand property for multiple grid properties (i.e. grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow).

How to Use Grid Container Properties in CSS

Now, we will practically implement some of the above-described properties for a profound understanding.

The grid-template-columns & grid-template-rows Properties

These properties can take multiple space-separated values such as auto, percentage, etc.

Let’s modify Example1 a little bit; in the below example, all the code will remain the same except the grid-template-columns property.

Example 2

In this example, we will add a grid-template-columns property to specify the columns size of our choice:

grid-template-columns: 1fr auto auto;

From the above snippet, we can observe that the first column’s width is “1fr,” and the width of the remaining two columns is “auto”.

Therefore first column’s width will be different from the remaining two columns:

Similarly, we can use the grid-template-rows property to specify the size of rows.

The align-content Property

To align the grid along the vertical/block axis or columns, we can use the align-content property, and it can take different values to perform different functionalities such as “center”, “start”, “end”, “space-evenly”, etc.

Example 3

In this example, we will utilize the align-content property and set its value as “end” to set/align the rows at the end of the container. The below code snippet shows the code for the container-class while the item class and HTML code will remain the same as in previous examples:

.container-class {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 300px;
  align-content: end;
  background-color: green;
  padding: 10px;
}

The align-content property will make the following impact when its value is set as “end”:

The output authenticates the working of align-content property.

Similarly, we can implement the rest of the Grid container properties to avail the different functionalities depending upon our desire and necessities.

Conclusion

A grid container is a box/container that contains grid items and can place these items within the rows and columns. To create a grid container, we need to utilize the display property and set its value as either inline-grid or grid. Moreover, a wide range of Grid properties is available in CSS to design the web pages, such as justify-items align-items, justify-content, align-content, grid-auto-flow, grid, and so on. This write-up explained various aspects of Grid container properties and implemented them practically.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.