LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

Introduction to CSS Grid

3 minute

What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS. Unlike Flexbox, which works in one direction (row or column), CSS Grid lets you align items in both rows and columns simultaneously. This makes it ideal for creating:

  • Dashboards
  • Photo galleries
  • Magazine-style layouts
  • E-commerce product grids

With CSS Grid, you can design layouts without using floats or manual positioning, reducing extra wrapper elements and making your HTML cleaner.

CSS Grid Layout Module

The CSS Grid Layout Module is a modern way to design web pages. It helps you create clean, flexible, and responsive layouts using rows and columns—without using floats or tricky positioning.With Grid, you can easily build page parts like headers, sidebars, content areas, and footers. It works in all modern browsers, which makes it one of the most useful tools for web developers today.

Easy CSS Grid Layout Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple CSS Grid Example</title>
  <style>
    .grid-container {
      display: grid; /* turns this div into a grid */
      grid-template-columns: 150px 1fr; /* 2 columns: 150px sidebar + flexible main area */
      grid-template-rows: auto 1fr auto; /* 3 rows: header, content, footer */
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      gap: 10px; /* space between grid items */
      height: 100vh;
    }

    header {
      grid-area: header;
      background: lightgreen;
      padding: 15px;
      text-align: center;
      font-size: 20px;
    }

    nav {
      grid-area: sidebar;
      background: lightblue;
      padding: 15px;
    }

    main {
      grid-area: main;
      background: #f0f0f0;
      padding: 15px;
    }

    footer {
      grid-area: footer;
      background: lightcoral;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <header>My Header</header>
    
    <nav>
      <p>Link 1</p>
      <p>Link 2</p>
      <p>Link 3</p>
    </nav>
    
    <main>
      <h2>Welcome to CSS Grid</h2>
      <p>This is the main content area. CSS Grid makes layouts easy!</p>
    </main>
    
    <footer>My Footer</footer>
  </div>
</body>
</html>

Output :

learn code with durgesh images

Advantages of CSS Grid

  • Two-dimensional layouts – Handles rows and columns together.

  • Precise positioning – Place items exactly where you want.
  • Responsive-friendly – Works well with fr units, minmax(), and media queries.
  • Cleaner code – Less nesting and extra divs.
  • Alignment & overlapping – Control alignment and span items across rows/columns.

Grid vs Flexbox

FeatureCSS GridCSS Flexbox
DimensionsTwo-dimensional (rows + columns)One-dimensional (row OR column)
Best Use CaseComplex layoutsSimple layouts, navbars, cards
ControlFull control of rows and columnsControl along a single axis

Real-World Use Cases

CSS Grid is widely used in modern web development. Common scenarios include:

  • Blog or News Layouts – Multi-column posts.
  • Dashboards – Cards, charts, tables arranged in grids.
  • E-commerce Sites – Product listings or image galleries.
  • Portfolio Websites – Creative, asymmetric layouts with overlapping items.

Grid Components

  • Grid Container – The parent element with display: grid or inline-grid.

  • Grid Items – Child elements inside the container that occupy the grid cells.

Example:

<h2>CSS Grid Components Example</h2>
  
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
.grid-container {
      display: grid; /* turns this div into a grid container */
      grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
      gap: 10px; /* spacing between grid items */
      padding: 10px;
      background-color: #f4f4f4;
    }

    .grid-item {
      background-color: #4caf50;
      color: white;
      font-size: 20px;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
    }

Output :

learn code with durgesh images

Display Grid Property

A container becomes a grid container only when its display property is set to grid or inline-grid.

display: grid

  • Makes the container a block-level grid container (full-width by default).
  • All direct children automatically become grid items.
  • Allows use of grid-specific properties like grid-template-columns, grid-template-rows, gap.

Example:

<h2>Using display: grid</h2>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
.grid-container {
      display: grid; /* activates grid */
      grid-template-columns: 100px 100px 100px; /* 3 fixed columns */
      grid-template-rows: 100px 100px; /* 2 fixed rows */
      gap: 10px; /* space between cells */
      background-color: #eee;
      padding: 10px;
    }

    .grid-item {
      background-color: steelblue;
      color: white;
      font-size: 18px;
      text-align: center;
      line-height: 100px; /* vertically center text */
      border-radius: 6px;
    }

Output :

learn code with durgesh images

display: inline-grid

  • Makes the container an inline-level grid container (fits content width rather than full width).
  • Useful when the grid should flow with surrounding text or inline elements.

Example :

<h2>Using display: inline-grid;</h2>

  <div class="inline-grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>

  <div class="inline-grid-container">
    <div class="grid-item">A</div>
    <div class="grid-item">B</div>
    <div class="grid-item">C</div>
  </div>
.inline-grid-container {
      display: inline-grid; /* inline-level grid */
      grid-template-columns: 80px 80px 80px; /* 3 columns */
      gap: 5px;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px;
      border: 2px solid #333;
    }

    .grid-item {
      background-color: crimson;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 6px;
    }

Output :

learn code with durgesh images

Key CSS Grid Properties

PropertyDescription
displayDefines the container as grid or inline-grid.
grid-template-columnsSets the number and size of columns.
grid-template-rowsSets the number and size of rows.
grid-template-areasAssigns named areas for easier placement of items.
grid-gap / gapSets spacing between rows and columns.
row-gap / column-gapSets spacing for rows or columns individually.
grid-auto-rows / grid-auto-columnsDefault size for automatically created rows/columns.
grid-auto-flowControls how items are auto-placed in the grid.
grid-areaAssigns an item to a named grid area.
justify-contentHorizontally aligns the entire grid inside the container.
align-contentVertically aligns the entire grid inside the container.
justify-itemsHorizontally aligns items within their grid cells.
align-itemsVertically aligns items within their grid cells.
justify-selfAligns a specific item horizontally.
align-selfAligns a specific item vertically.
place-itemsShorthand for align-items + justify-items.
place-contentShorthand for align-content + justify-content.
grid-column / grid-rowShorthand for specifying start and end positions.


Article 0 of 0