Responsive Web Layout Using CSS Grid

This tutorial demonstrates how to create a responsive layout using CSS Grid.

1. HTML Structure

Here’s the basic HTML structure:

<div class="main">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2</div>
  <div class="box box3">Box3</div>
</div>

Explanation:

main: The grid container holding all the child grid items (Box1, Box2, Box3).
box: Common class for all grid items.
box1, box2, box3: Specific classes for individual grid items, allowing custom layout for each item.

2. CSS Styling

The CSS defines the grid layout and responsive behavior:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  background-color: violet;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto; /* Single row initially */
  grid-template-areas: "box1 box2 box3"; /* Layout of items */
}

.box {
  background-color: aqua;
  padding: 15px;
  margin: 10px;
  min-height: 200px;
}

.box1 {
  grid-area: box1; /* Places Box1 in its defined grid area */
}

.box2 {
  grid-area: box2; /* Places Box2 in its defined grid area */
}

.box3 {
  grid-area: box3; /* Places Box3 in its defined grid area */
}

/* Responsive Design for Tablets */
@media (max-width: 768px) {
  .main {
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-rows: auto auto; /* Two rows */
    grid-template-areas:
      "box1 box2"
      "box3 box3"; /* Box3 spans two columns */
  }
}

/* Responsive Design for Mobile */
@media (max-width: 480px) {
  .main {
    grid-template-columns: auto; /* Single column */
    grid-template-rows: auto auto auto; /* Three rows */
    grid-template-areas: 
      "box1"
      "box2"
      "box3"; /* Boxes stack vertically */
  }
}

3. Key CSS Grid Properties

display: grid: Defines the container as a grid layout.
grid-template-columns: Specifies the column structure.
grid-template-rows: Specifies the row structure.
grid-template-areas: Defines the layout by naming specific grid areas.
grid-area: Assigns each grid item to a named area.
@media: Adjusts the grid for different screen sizes.

4. Responsive Design

The grid layout adapts based on screen size:

Default: Three equal-width columns for larger screens.
Tablets: Two columns and two rows, with Box3 spanning the full width of the second row.
Mobile: Single column with all boxes stacked vertically.

5. Complete Code

Here’s the complete code for your grid layout:

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web layout using css Grid</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main">
      <div class="box box1">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eaque aliquid sunt cumque repudiandae numquam iste exercitationem 
        eligendi omnis incidunt aliquam. Fuga illo ea quod saepe similique 
        at, aliquam quaerat cum?</p>
      </div>
      <div class="box box2">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eaque aliquid sunt cumque repudiandae numquam iste exercitationem 
        eligendi omnis incidunt aliquam. Fuga illo ea quod saepe similique 
        at, aliquam quaerat cum?</p>
      </div>
      <div class="box box3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eaque aliquid sunt cumque repudiandae numquam iste exercitationem 
        eligendi omnis incidunt aliquam. Fuga illo ea quod saepe similique 
        at, aliquam quaerat cum?</p>
      </div>
    </div>
  </body>
</html>

Run Code

CSS


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  background-color: violet;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto; /* Single row initially */
  grid-template-areas: "box1 box2 box3"; /* Layout of items */
}

.box {
  background-color: aqua;
  padding: 15px;
  margin: 10px;
  min-height: 200px;
}

.box1 {
  grid-area: box1; /* Places Box1 in its defined grid area */
}

.box2 {
  grid-area: box2; /* Places Box2 in its defined grid area */
}

.box3 {
  grid-area: box3; /* Places Box3 in its defined grid area */
}

/* Responsive Design for Tablets */
@media (max-width: 768px) {
  .main {
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-rows: auto auto; /* Two rows */
    grid-template-areas:
      "box1 box2"
      "box3 box3"; /* Box3 spans two columns */
  }
}

/* Responsive Design for Mobile */
@media (max-width: 480px) {
  .main {
    grid-template-columns: auto; /* Single column */
    grid-template-rows: auto auto auto; /* Three rows */
    grid-template-areas: 
      "box1"
      "box2"
      "box3"; /* Boxes stack vertically */
  }
}

Run Code

6. Summary

With CSS Grid, we created a responsive layout that adjusts seamlessly for different devices. This approach simplifies layout management and ensures a consistent design.

Previous Next