What is Display Grid in CSS?

When it comes to web development, CSS plays a crucial role in defining the visual appearance of a website. It is a styling language that is used to add colors, layouts, fonts, and other design elements to web pages. One of the most powerful and popular CSS features is the display grid property.

Introduction

Display grid is a CSS property that allows developers to create complex layouts for web pages in a simple and intuitive way. The display grid property applies to a container element, which transforms into the grid container, defining rows and columns and allowing for the placement and alignment of items within those rows and columns. Grid items, any child elements within the container, can be positioned and sized within the grid.

How Does Display Grid Work?

Display grid works by creating a two-dimensional grid system that consists of rows and columns. The grid is defined using the display: grid property, which is applied to a container element. After the container element becomes a grid container, it enables child elements within the container to transform into grid items that can be positioned and sized within the grid.

Creating a Basic Grid Layout

To create a basic grid layout, we first need to define the grid container using the display: grid property. We can then add child elements to the container, which will become grid items. Here’s an example:

.container {
  display: grid;
}

.item {
  background-color: #ccc;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have a grid container with four grid items. By default, the items are arranged in a single row. We can change the layout by defining rows and columns.

Defining Grid Columns and Rows

To define grid columns and rows, we use the grid-template-columns and grid-template-rows properties. These properties allow us to specify the size and number of columns and rows in the grid. Here’s an example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.item {
  background-color: #ccc;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have defined three columns and two rows for our grid. The 1fr unit of measurement means that each column will take up an equal amount of space. We have also defined a height of 100 pixels for each row.

Aligning and Positioning Grid Items

Once we have defined the grid, we can position and align the grid items within the grid using the grid-column and grid-row properties. These properties allow us to specify the starting and ending positions of a grid item within the grid. Here’s an example:

.item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.item:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have positioned the first item to span two columns and one row, the second item to span two columns and one row, and the third item to span one column and two rows.

Spanning Multiple Rows or Columns

We can also span a grid item across multiple rows or columns using the grid-column and grid-row properties. Here’s an example:

.item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have spanned the first item across two columns and two rows, and the second item across two columns and one row.

Nested Grids

We can also create nested grids by applying the display: grid property to a grid item. Here’s an example:

.item:nth-child(1) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.item:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

<div class="container">
  <div class="item">
    <div class="sub-item">Sub Item 1</div>
    <div class="sub-item">Sub Item 2</div>
  </div>
  <div class="item">
    <div class="sub-item">Sub Item 3</div>
    <div class="sub-item">Sub Item 4</div>
  </div>
</div>

In this example, we have created a nested grid by applying the display: grid property to the first and second grid items. We have also defined two columns and one row for each nested grid.

Working with Grid Gaps

We can add gaps between rows and columns in a grid using the grid-column-gap and grid-row-gap properties. Here’s an example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have added a gap of 20 pixels between the columns and a gap of 10 pixels between the rows.

Responsive Grids

One of the great features of CSS Grid is that it allows us to create responsive layouts. We can do this by using media queries to change the grid template based on the screen size. Here’s an example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, we have used a media query to change the grid template to a single column layout on screens smaller than 768 pixels wide.

Conclusion

CSS Grid is a powerful tool for creating flexible, responsive layouts. With CSS Grid, we can easily create complex grids and position elements within them using simple and intuitive syntax. By mastering CSS Grid, web developers can create beautiful and functional websites that look great on all devices.

Thank You