❮ Previous Next ❯

CSS Grid

  • Learn CSS Grid to create advanced and responsive layouts with rows and columns.

  • What is CSS Grid ?

    CSS Grid is a modern two-dimensional layout system that allows you to design layouts using rows AND columns together.

    In simple words

    CSS Grid lets you divide a page into rows and columns and place elements exactly where you want.

    Controls width and height
    Manages full page layouts
    Works like a smart table system

    Unlike Flexbox (1 direction), Grid works in both directions at the same time.

    Why CSS Grid Is Important ?

    Before CSS Grid

    • Too many nested <div>s
    • Float & position hacks
    • Hard-to-maintain layouts
    • Messy CSS

    With CSS Grid

    • Clean structure
    • Precise placement
    • Fewer lines of CSS
    • Perfect page layouts

    Real-life comparison:
    A chessboard
    Rows + columns
    Every piece has a fixed position
    That’s how CSS Grid works.

    Two-Dimensional Layout Explained

    CSS Grid works on two axes at once:

    • Rows → horizontal
    • Columns → vertical

    Control layout in both directions
    Place elements inside grid cells

    Flexbox = one straight line
    Grid = full layout system

    When Should You Use CSS Grid ?

    CSS Grid is best for:

    Full website layouts
    Dashboards
    Image galleries
    Admin panels
    Complex UI structures

    If layout looks like a page structure, use Grid.


    CSS Grid Terminology 

    Grid Container → Parent element
    Grid Items → Child elements
    Grid Lines → Invisible separators
    Grid Cells → Single box
    Grid Areas → Group of cells

    Creating a Grid 

    To activate Grid:

    display: grid;

    That’s it - layout power unlocked

    Defining Columns & Rows

    Grid Columns - grid-template-columns

Defining Grid Columns

Creates a grid layout with three fixed-width columns of 200px each. 

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

  • Creates 3 fixed columns

    Using fr Unit

Using fr Unit in CSS Grid

Creates three equal-width columns using the fr (fraction) unit to divide available space evenly. 

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

  • Equal columns
    Responsive by default

    Real-life example:
    Sharing pizza equally 

    Grid Rows - grid-template-rows

Defining Grid Rows

Creates two rows in the grid with fixed heights of 100px and 200px. 

.container {
  display: grid;
  grid-template-rows: 100px 200px;
}

  • Fixed row heights

    Gap Between Items

Title: Adding Space Between Grid

Adds 20px spacing between rows and columns inside the grid layout. 

.container {
  display: grid;
  gap: 20px;
}

  • Space between rows & columns

    Like spacing between floor tiles

Basic CSS Grid Layout

Creates a simple 2-column grid layout with equal-width columns and spacing between items. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Example</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 40px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .item {
      padding: 20px;
      background-color: lightblue;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

  • Clean 2 × 2 grid
    Easy to scale

    CSS Grid for Dashboards

    Dashboards need:
     Fixed sections
     Clean alignment
     Equal cards

Layout for Dashboard

Creates a structured dashboard layout with 3 equal columns, 2 fixed-height rows, and consistent spacing between sections. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Grid</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f4f6f9;
    }

    .dashboard {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 150px 150px;
      gap: 20px;
    }

    .card {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="card">Analytics</div>
    <div class="card">Sales</div>
    <div class="card">Users</div>
    <div class="card">Reports</div>
    <div class="card">Revenue</div>
    <div class="card">Settings</div>
  </div>
</body>
</html>

  • Cards auto-align
    Perfect admin UI

    Grid Areas 

    Grid areas make layouts readable & semantic.

Defining Layout

Defines a semantic and readable grid layout structure using named areas like header, sidebar, content, and footer. 

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
  • Assign Areas

Assigning Grid Areas to Elements

Assigns each HTML element to its named grid area, placing them correctly inside the grid layout. 

header { 
  grid-area: header; 
}

aside  { 
  grid-area: sidebar; 
}

main   { 
  grid-area: content; 
}

footer { 
  grid-area: footer; 
}

  • Super clean
    Easy to modify
    Interview favorite

    Responsive Grid Without Media Queries

Responsive Grid

Creates a fully responsive grid that automatically adjusts the number of columns based on available space without using media queries. 

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

  • Automatically adapts
    Responsive by default

    Like adjustable storage racks

    Grid vs Flexbox

    FeatureFlexboxGrid
    Direction1D2D
    Best forMenus, alignmentLayouts
    ControlLine-basedArea-based
    UsageComponentsPage structure

    Common Mistakes

      • Using Grid for simple centering
     • Forgetting display: grid
     • Hard-coding column sizes
     • Overusing nested grids

    Best Practices for CSS Grid

    Use Grid for page layouts
    Use Flexbox inside grid items
    Prefer fr units
    Use grid areas for clarity
    Combine with media queries

❮ Previous Next ❯