Rowsan Ali

Posted on Feb 12

How to Use CSS Grid for Complex Web Layouts: A Step-by-Step Guide

#webdev #programming #javascript #beginners

CSS Grid is a powerful layout system that allows web developers to create complex, responsive web layouts with ease. Unlike traditional layout methods like floats or flexbox, CSS Grid provides a two-dimensional grid-based layout system, making it ideal for designing intricate web designs. In this blog post, we’ll walk through how to use CSS Grid to create complex web layouts, complete with code examples.

What is CSS Grid?

CSS Grid is a layout module that enables you to create grid-based layouts by defining rows and columns. You can place items anywhere on the grid, overlap them, and control their alignment and spacing. It’s supported in all modern browsers, making it a reliable choice for modern web development.

Step 1: Setting Up the Grid

To start using CSS Grid, you need to define a grid container. This is done by setting the display property of an element to grid or inline-grid.

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-template-rows: auto; /* rows will adjust to content */
  gap: 10px; /* spacing between grid items */
}

In this example, we’ve created a grid with 3 equal-width columns and automatic row sizing. The gap property adds spacing between grid items.

Step 2: Defining Grid Tracks

Grid tracks are the rows and columns that make up the grid. You can define them using the grid-template-columns and grid-template-rows properties.

Example: Creating a Complex Grid Layout

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 3 columns: fixed, flexible, and double flexible */
  grid-template-rows: 100px auto 150px; /* 3 rows with specific heights */
  gap: 15px;
}

Here:

The first column is fixed at 200px.
The second column takes up 1 fraction of the available space.
The third column takes up 2 fractions of the available space.
Rows have specific heights, with the middle row adjusting to content.

Step 3: Placing Items on the Grid

You can place items on the grid using the grid-column and grid-row properties. These properties define where an item starts and ends in the grid.

Example: Spanning Items Across Columns and Rows

<div class="grid-container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item main">Main Content</div>
  <div class="item footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 100vh; /* full viewport height */
}

.header {
  grid-column: 1 / -1; /* spans from the first to the last column */
  background-color: #4CAF50;
}

.sidebar {
  grid-row: 2 / 3; /* spans the second row */
  background-color: #2196F3;
}

.main {
  grid-row: 2 / 3; /* spans the second row */
  background-color: #f1f1f1;
}

.footer {
  grid-column: 1 / -1; /* spans from the first to the last column */
  background-color: #FF9800;
}

In this example:

The header and footer span the entire width of the grid.
The sidebar and main content share the second row.

Step 4: Using Grid Areas for Better Readability

Grid areas allow you to name sections of your grid, making your layout more readable and easier to manage.

Example: Defining Grid Areas

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
  background-color: #4CAF50;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2196F3;
}

.main {
  grid-area: main;
  background-color: #f1f1f1;
}

.footer {
  grid-area: footer;
  background-color: #FF9800;
}

Here, we’ve named each section of the grid using grid-template-areas and assigned items to these areas using the grid-area property.

Step 5: Making the Layout Responsive

CSS Grid works seamlessly with media queries, allowing you to create responsive layouts.

Example: Responsive Grid Layout

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

In this example:

On smaller screens, the layout stacks vertically.
On larger screens, the layout switches to a two-column design.

Step 6: Advanced Grid Features

CSS Grid offers advanced features like alignment, overlapping items, and nested grids.

Example: Overlapping Items

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

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-color: #4CAF50;
  z-index: 1;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-color: #2196F3;
  z-index: 2;
}

Here, item2 overlaps item1 by positioning it in the same grid cells.

Join our free newsletter, to get information delivered to your inbox.

Conclusion

CSS Grid is a versatile and powerful tool for creating complex web layouts. By mastering its features, you can design responsive, maintainable, and visually appealing websites. Whether you’re building a simple two-column layout or a complex dashboard, CSS Grid provides the flexibility and control you need.

DEV Community