Bird
Raised Fist0
CSSmarkup~5 mins

Why grid is needed in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Grid helps arrange things neatly on a page in rows and columns. It makes building layouts easier and cleaner.

When you want to create a photo gallery with rows and columns.
When you need a webpage layout with header, sidebar, main content, and footer.
When you want items to line up evenly without guessing sizes.
When you want a design that adjusts nicely on different screen sizes.
Syntax
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
Use display: grid; on the container to start using grid layout.
grid-template-columns sets how many columns and their widths.
Examples
This creates three columns with fixed widths.
CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}
This creates four equal columns that share space equally.
CSS
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
This creates three columns where the middle one is twice as wide as the others.
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
Sample Program

This example shows six boxes arranged in three equal columns using CSS Grid. The boxes have space between them and are centered on the page.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      max-width: 600px;
      margin: 2rem auto;
      padding: 1rem;
      border: 2px solid #333;
    }
    .grid-item {
      background-color: #4CAF50;
      color: white;
      padding: 1rem;
      text-align: center;
      font-size: 1.2rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <main>
    <section class="grid-container" aria-label="Simple grid layout">
      <div class="grid-item">Box 1</div>
      <div class="grid-item">Box 2</div>
      <div class="grid-item">Box 3</div>
      <div class="grid-item">Box 4</div>
      <div class="grid-item">Box 5</div>
      <div class="grid-item">Box 6</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Grid is powerful for building complex layouts without extra code.

It works well with responsive design to adjust layouts on different screens.

Use browser DevTools to see grid lines and understand how items are placed.

Summary

Grid helps organize content in rows and columns easily.

It saves time and makes layouts cleaner and more flexible.

Grid works well for both simple and complex webpage designs.

Practice

(1/5)
1. Why do web developers use CSS Grid for layouts?
easy
A. To change text color dynamically
B. To add animations to buttons
C. To easily arrange content in rows and columns
D. To load images faster

Solution

  1. Step 1: Understand the purpose of CSS Grid

    CSS Grid is designed to help place elements in rows and columns on a webpage.

  2. Step 2: Compare options with Grid's function

    Only arranging content in rows and columns matches Grid's main use.

  3. Final Answer:

    To easily arrange content in rows and columns -> Option C

  4. Quick Check:

    Grid = layout in rows and columns [OK]
Hint: Grid is for layout, not colors or animations [OK]
Common Mistakes:
  • Confusing Grid with animation or color properties
  • Thinking Grid speeds up loading
  • Mixing Grid with JavaScript functions
2. Which CSS property starts a grid container?
easy
A. display: grid;
B. display: flex;
C. position: grid;
D. grid-template-columns: 1fr 1fr;

Solution

  1. Step 1: Identify the property that creates a grid container

    The property display: grid; turns an element into a grid container.

  2. Step 2: Check other options for correctness

    display: flex; creates a flex container, not grid. position: grid; is invalid. grid-template-columns defines columns but does not start the grid.

  3. Final Answer:

    display: grid; -> Option A

  4. Quick Check:

    Start grid with display: grid [OK]
Hint: Grid container always uses display: grid [OK]
Common Mistakes:
  • Using display: flex instead of grid
  • Trying to set position: grid (invalid)
  • Confusing grid-template-columns as container starter
3. What will be the layout result of this CSS? 
container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
}
medium
A. Two columns and two rows grid with fixed sizes
B. One column with four rows
C. A flexbox layout with wrapping
D. No grid created, default block layout

Solution

  1. Step 1: Analyze grid-template-columns and rows

    Two columns each 100px wide and two rows each 50px tall create a 2x2 grid.

  2. Step 2: Confirm display: grid creates grid layout

    The container uses display: grid;, so it forms a grid with specified columns and rows.

  3. Final Answer:

    Two columns and two rows grid with fixed sizes -> Option A

  4. Quick Check:

    grid-template-columns and rows define grid size [OK]
Hint: grid-template-columns and rows define grid shape [OK]
Common Mistakes:
  • Thinking it creates flexbox layout
  • Ignoring grid-template-rows
  • Assuming default block layout
4. Identify the error in this CSS grid code: 
.box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px;
  grid-template-columns: 50px 50px 50px;
}
medium
A. grid-template-columns values must be equal
B. grid-template-columns is declared twice, second overwrites first
C. display: grid; is invalid syntax
D. grid-template-rows cannot have only one value

Solution

  1. Step 1: Check for duplicate properties

    The property grid-template-columns is declared twice; the second declaration overwrites the first.

  2. Step 2: Validate other properties

    grid-template-rows: 100px; with one value is valid, display: grid; is correct, and column values can differ.

  3. Final Answer:

    grid-template-columns is declared twice, second overwrites first -> Option B

  4. Quick Check:

    Duplicate property overwrites previous [OK]
Hint: Avoid repeating same CSS property; last one wins [OK]
Common Mistakes:
  • Thinking one row value is invalid
  • Believing display: grid is wrong syntax
  • Assuming column sizes must be equal
5. You want a webpage layout with a header, sidebar, main content, and footer arranged in a grid. Which benefit of CSS Grid helps most here?
hard
A. It adds shadows and borders without extra code
B. It automatically changes text size based on screen width
C. It loads images faster by lazy loading
D. It allows placing items in specific rows and columns easily

Solution

  1. Step 1: Understand layout needs

    The layout requires placing header, sidebar, main content, and footer in specific grid areas.

  2. Step 2: Match CSS Grid benefits

    CSS Grid allows easy placement of items in rows and columns, perfect for this layout.

  3. Final Answer:

    It allows placing items in specific rows and columns easily -> Option D

  4. Quick Check:

    Grid = precise layout placement [OK]
Hint: Grid excels at placing items in rows and columns [OK]
Common Mistakes:
  • Confusing Grid with text resizing or image loading
  • Thinking Grid adds visual effects like shadows
  • Ignoring Grid's layout control power