cyberangles blog

Mastering the CSS Grid Property: A Comprehensive Guide

In the world of web design, creating responsive and visually appealing layouts is crucial. The CSS Grid property has emerged as a powerful tool to achieve this. It allows developers to create complex grid-based layouts with ease, providing a more efficient and flexible alternative to traditional layout methods like floats and positioning. In this blog post, we'll dive deep into the CSS Grid property, exploring its features, common practices, best practices, and example usage.

2026-06

Table of Contents#

Understanding CSS Grid#

CSS Grid is a two-dimensional layout system that divides a container into rows and columns. Each cell in the grid can hold one or more grid items. The grid container is the parent element that holds the grid items, and the grid items are the child elements of the grid container.

Grid Container Properties#

display#

The display property is used to define a container as a grid. To create a grid container, set the display property to grid or inline-grid.

.container {
  display: grid;
}

grid-template-columns and grid-template-rows#

The grid-template-columns and grid-template-rows properties are used to define the columns and rows of the grid. These properties take a space-separated list of values that represent the width or height of each column or row.

.container {
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: 100px 200px; /* Two rows with fixed heights */
}

grid-template-areas#

The grid-template-areas property is used to create named grid areas. This property takes a string of space-separated values that represent the grid areas. Each value corresponds to a grid item's grid-area property.

.container {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

grid-gap#

The grid-gap property is used to create gaps between grid items. This property is a shorthand for grid-row-gap and grid-column-gap.

.container {
  grid-gap: 10px; /* 10px gap between rows and columns */
}

justify-content and align-content#

The justify-content and align-content properties are used to align the grid within the container. These properties can take values like start, end, center, stretch, space-around, space-between, and space-evenly.

.container {
  justify-content: center; /* Horizontally center the grid */
  align-content: center; /* Vertically center the grid */
}

Grid Item Properties#

grid-column and grid-row#

The grid-column and grid-row properties are used to define the position of a grid item within the grid. These properties can take values like span to span multiple columns or rows.

.item {
  grid-column: 1 / 3; /* Span from column 1 to column 3 */
  grid-row: 2; /* Start at row 2 */
}

grid-area#

The grid-area property is used to assign a grid item to a named grid area. This property takes a value that corresponds to the name defined in the grid-template-areas property.

.item {
  grid-area: header;
}

justify-self and align-self#

The justify-self and align-self properties are used to align a grid item within its cell. These properties can take values like start, end, center, and stretch.

.item {
  justify-self: center; /* Horizontally center the item */
  align-self: center; /* Vertically center the item */
}

Common Practices#

Responsive Grids#

To create responsive grids, use media queries to adjust the grid-template-columns and grid-template-rows properties based on the screen size.

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Single column on small screens */
  }
}

Nested Grids#

Nested grids can be used to create more complex layouts. Simply create a grid container inside another grid item.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
 
.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Best Practices#

Use Semantic HTML#

Use semantic HTML elements like <header>, <main>, <section>, <article>, <aside>, and <footer> to make your code more readable and accessible.

Test in Multiple Browsers#

CSS Grid is supported in most modern browsers, but it's still a good idea to test your layouts in multiple browsers to ensure compatibility.

Example Usage#

Here's an example of a simple grid layout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }
 
    .item {
      background-color: lightblue;
      padding: 20px;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

Reference#