html

CSS Grid Layout model | Explained

The CSS Grid Layout model allows us to create a two-dimensional layout on a website and align the grid’s items in rows and columns. If we compare the CSS Grid layout model with the prior layout models, consequently, we will come to know that the two-directional behavior of the CSS grid model has completely changed the way of designing the user interfaces. The CSS Grid Layout model makes it possible to design the web pages without utilizing the floats, positioning, inblocks, etc.

In this write-up, we will cover all the basics of the CSS Grid layout model, and it will be organized as follows:

So, let’s begin!

What is CSS Grid Layout Model

It is a 2-dimensional grid-based layout model with rows and columns. These rows and columns can hold grid elements.

What is Difference between Grid and Flexbox Model

Now, you must be wondering both CSS Flexbox and CSS Grid are layout models, so what’s the difference between both these layout models?

The below-given table will assist you in understanding the fundamentals of this concept:

CSS Grid Layout CSS Flexbox
It is a two-dimensional layout model. It is a one-dimensional layout model.
The Grid layout can work on rows and columns simultaneously. The Flexbox can work on either rows or columns at one time.
It helps to create more complicated and organized layouts. It helps to design and create responsive web pages.
The CSS Grids are best suited for larger-scale layouts. The CSS Flexbox layouts are best suited for smaller-scale layouts.
Layout first approach. Content first approach.

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. To create a grid container, we need to utilize the display property and set its value as either inline-grid or grid.

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

Properties Description
display determines an element as a grid by specifying its value to inline-grid or grid.
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. track-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 Specify the gap size between different columns and rows of the grid 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 these properties 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 Shorthand property for grid-template-rows, grid-auto-rows, grid-template-columns, grid-auto-columns, grid-template-areas, and the grid-auto-flow properties.

Practical Implementation of CSS Grid Layout

Now, let’s implement a couple of above-described properties practically:

Example 1

Firstly, we will implement the grid property and set its value as “grid”. Next, We will utilize the grid-template-columns property and set the value “auto” for all three columns:

<html>
<head>
<style>
.container-class {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;  
  background-color: blue;
}
.item-class {
  background-color:skyblue;
  border: 2px solid black;
  padding: 30px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Grid Layout Model</h1>
<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>

</body>
</html>

We will get the following output for the above given code snippet:

Example 2

Now let’s implement the grid-template-rows property as well to specify the row’s size:

grid-template-rows: auto 150px;

The above snippet shows that the first row’s size is “auto” and the second row’s size is “150px”. The resultant output will look like this:

We can observe the space at the bottom of the second row, which validates the working of the grid-template-rows property.

What are Grid Items?

The elements/items present within the CSS Grid container are known as grid items or child elements.

The table given below illustrates different properties of grid items:

Properties Description
grid-column-start & grid-row-start These properties determine the location of grid items by specifying where to start the item.
grid-column-end & grid-row-end These properties determine the location of grid items by specifying where to end the grid item.
grid-column It is a shorthand property for grid-column-start and grid-column-end properties.
grid-row It is a shorthand property for two properties i.e. grid-row-start and grid-row-end.
grid-area It specifies the grid item’s name, or it can be used to achieve the functionalities of multiple properties i.e. grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
justify-self It aligns a grid item within a cell along the row/inline axis.
align-self It aligns a grid item within a cell along the column/block axis.
place-self It is a shorthand property for two properties i.e. align-self and justify-self.

Example 3

In this example, we will utilize the align-self property in the “item-class”, so, all the code will be the same as specified in the previous examples and the only difference will occur in the item-class as shown below:

.item-class {
  background-color:skyblue;
  border: 2px solid black;
  padding: 30px;
  font-size: 30px;
  text-align: center;
  align-self:flex-end;
}

We set the value of the align-self property as flex-end, which will align the lines at the end of the container:

This is how we can utilize any Grid container or Grid item properties according to our scenario.

Conclusion

The CSS Grid Layout model allows us to create a two-dimensional layout on a website and align the grid’s items in rows and columns. The two-dimensional behavior of the Grid layout model allows us to work on rows and columns simultaneously. The CSS grid layout model can have one parent element and multiple child elements. The parent element is called a grid container, and the child element is called a grid item. Numerous properties can be used to work with grid layout models, such as display, grid, place-self, justify items, etc

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.