Why grid is needed in CSS - See It in Action

Why Grid is Needed in CSS Layouts

📖 Scenario: You are creating a simple webpage layout for a small business homepage. The page needs a header, a navigation menu, a main content area, and a footer. You want the layout to be neat and easy to manage.

🎯 Goal: Build a basic webpage layout using CSS Grid to arrange the header, navigation, main content, and footer sections clearly and responsively.

📋 What You'll Learn

Create a simple HTML structure with header, nav, main, and footer elements.

Use CSS Grid to arrange these sections in a clean layout.

Define grid areas for each section to make the layout easy to understand and maintain.

Make sure the layout adjusts nicely on smaller screens.

💡 Why This Matters

🌍 Real World

CSS Grid is used by web developers to create clean, flexible, and maintainable webpage layouts that adapt to different screen sizes.

💼 Career

Understanding CSS Grid is essential for front-end developers to build modern, responsive websites that work well on desktops, tablets, and phones.

1

Create the HTML structure

Write the HTML code to create a header, nav, main, and footer inside a div with the class container.

CSS

Need a hint?

Use semantic HTML tags inside the container div.

2

Set up the grid container

In CSS, select the .container class and set its display property to grid. Also, define the grid template areas with grid-template-areas for header, nav, main, and footer arranged in three rows: the first row with header spanning all columns, the second row with nav and main side by side, and the footer spanning all columns below.

CSS

  Header
  Navigation
  Main Content
  Footer



.container {
  /* Your code here */
}

Need a hint?

Use display: grid; and define grid-template-areas with the exact names header, nav, main, and footer.

3

Assign grid areas to each section

In CSS, assign each section (header, nav, main, and footer) to its corresponding grid area using the grid-area property with the exact names: header, nav, main, and footer.

CSS

  Header
  Navigation
  Main Content
  Footer



.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  gap: 1rem;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}
header {
  /* Your code here */
}
nav {
  /* Your code here */
}
main {
  /* Your code here */
}
footer {
  /* Your code here */
}

Need a hint?

Use grid-area: header; for the header, and similarly for nav, main, and footer.

4

Make the layout responsive

Add a CSS media query for screen widths less than 600px. Inside it, change the .container grid to have one column and four rows, stacking header, nav, main, and footer vertically by updating grid-template-columns, grid-template-rows, and grid-template-areas accordingly.

CSS

  Header
  Navigation
  Main Content
  Footer



.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  gap: 1rem;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}
header {
  grid-area: header;
  background-color: #a2d2ff;
  padding: 1rem;
}
nav {
  grid-area: nav;
  background-color: #ffafcc;
  padding: 1rem;
}
main {
  grid-area: main;
  background-color: #b5ead7;
  padding: 1rem;
}
footer {
  grid-area: footer;
  background-color: #ffd6a5;
  padding: 1rem;
}

/* Your code here for responsive layout */

Need a hint?

Use a media query with @media (max-width: 600px) and redefine the grid areas to stack vertically.