CSS Grid

CSS Grid is a powerful layout system that allows you to design web pages using a two-dimensional grid of rows and columns. Unlike Flexbox (which works in one direction at a time), Grid lets you control both horizontal and vertical placement simultaneously.

With Grid, you can build complex layouts like headers, footers, sidebars, and content sections with ease.

Starting a Grid

To begin using Grid, apply display: grid to a container. All direct children inside the container become grid items.

				
					.grid-container {
  display: grid;
}

You can also use display: inline-grid if you want the grid container to behave like an inline element.

Defining Columns and Rows

Use grid-template-columns and grid-template-rows to set the structure of the grid.

				
					.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  grid-template-rows: 100px 100px;   /* 2 rows of fixed height */
}

1fr means one fraction of the available space.
You can mix values like px, fr, %, or auto.

Simple Grid Layout

				
					<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid - Learn With Arshyan</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 150px 150px;
      gap: 15px;
      background-color: #eee;
      padding: 20px;
    }

    .grid-item {
      background-color: #6c5ce7;
      color: white;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <h2>Basic Grid Example – Learn With Arshyan</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>

</body>
</html>

Controlling Grid Item Position

You can tell specific items where to appear using grid-column and grid-row.

				
					<div class="grid-item" style="grid-column: 1 / 3;">Spans 2 Columns</div>
<div class="grid-item" style="grid-row: 2 / 4;">Spans 2 Rows</div>

This means:

grid-column: 1 / 3 → Start at column 1 and span to column 3 (spans 2 columns)
grid-row: 2 / 4 → Start at row 2 and span to row 4 (spans 2 rows)

Practical Layout: Header, Sidebar, Content

Let’s build a quick structure that uses CSS Grid to layout a typical webpage section.

				
					<!DOCTYPE html>
<html>
<head>
  <title>Website Layout – Learn With Arshyan</title>
  <style>
    .layout {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
      grid-template-columns: 200px 1fr;
      grid-template-rows: 80px auto 60px;
      gap: 10px;
      padding: 10px;
    }

    .header   { grid-area: header; background: #2d3436; color: white; }
    .sidebar  { grid-area: sidebar; background: #dfe6e9; }
    .content  { grid-area: content; background: #b2bec3; }
    .footer   { grid-area: footer; background: #636e72; color: white; }

    .layout > div {
      padding: 20px;
      font-size: 18px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

  <h2>Page Layout with CSS Grid</h2>
  <div class="layout">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
    <div class="footer">Footer</div>
  </div>

</body>
</html>

This approach makes it easy to define clear, maintainable layout sections.

Summary Table

Property	Description
`display: grid`	Turns element into a grid container
`grid-template-columns`	Defines number and width of columns
`grid-template-rows`	Defines height of rows
`gap`	Adds space between grid items
`grid-column`	Sets item’s horizontal span and position
`grid-row`	Sets item’s vertical span and position
`grid-template-areas`	Names layout areas for cleaner structure

Learn With Arshyan Tip:

CSS Grid is ideal when you need a structured layout that involves both rows and columns. It works especially well for entire pages, dashboard layouts, and split-screen designs.