CssConceptBeginner · 3 min read

What is CSS Grid: Simple Explanation and Example

CSS Grid is a layout system in CSS that lets you create complex, two-dimensional web layouts easily by dividing a page into rows and columns. It helps position elements precisely on a grid, making responsive design simpler and more flexible.

⚙️

How It Works

Think of CSS Grid like a table made of invisible rows and columns on your webpage. You can place items anywhere inside this grid, just like putting books on specific shelves in a bookshelf. This system lets you control both the horizontal and vertical placement of elements, unlike older methods that mostly handled one direction at a time.

When you use CSS Grid, you first define the grid structure on a container element by setting how many rows and columns it should have and how big they are. Then, you place child elements into the grid cells or make them span multiple cells. This approach is like drawing a map for your content, so everything fits neatly and adjusts well on different screen sizes.

💻

Example

This example shows a simple 2-column, 2-row grid with four boxes placed in each cell.

html

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
.box {
  background-color: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 5px;
}

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

Output

A light gray rectangular area with four green boxes arranged in two rows and two columns, each box labeled Box 1, Box 2, Box 3, and Box 4 respectively.

🎯

When to Use

Use CSS Grid when you want to create layouts that need both rows and columns, like photo galleries, dashboards, or complex web pages. It is perfect for designs that require precise control over placement and sizing of elements in two directions.

For example, if you want a website with a header, sidebar, main content area, and footer all arranged neatly, CSS Grid makes it easy to build and adjust this layout for different screen sizes without complicated code.

✅

Key Points

CSS Grid creates a two-dimensional grid layout with rows and columns.
It allows precise placement and sizing of elements on the grid.
Grid containers define the structure; grid items are placed inside.
It simplifies responsive design by adjusting grid sizes and positions.
Works well for complex layouts like dashboards, galleries, and multi-section pages.

✅

Key Takeaways

CSS Grid is a powerful tool for creating two-dimensional layouts with rows and columns.

It lets you place and size elements precisely on a grid, making complex designs easier.

Use CSS Grid for layouts that need both horizontal and vertical control, like dashboards or galleries.

Grid containers define the grid structure; child elements are placed inside grid cells.

CSS Grid helps build responsive designs that adapt smoothly to different screen sizes.