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:
- What is a Grid Container in CSS
- The Display Property
- Grid Container Properties in CSS
- How to Use Grid Container Properties in CSS
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:
In the below-given code snippet, we will create a grid container and within container we will declare five child elements:
The respective style classes for grid container and grid items will be like this:
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:
|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.
In this example, we will add a grid-template-columns property to specify the columns size of our choice:
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.
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:
grid-template-columns: auto auto auto;
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.
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.