CSS Grid Layout – Blog & FAQ

Learn how display: grid works and how to use it effectively in your projects.

What is CSS Grid?

CSS Grid is a powerful layout system in CSS. It allows you to design web pages using rows and columns. With Grid, you can easily create complex layouts in a clean and responsive way.

In the example below, we are using a two-column grid layout where each column takes equal space using the fr unit. 

<div class="container-grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
.container-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.box {
  border: 2px solid #0d6efd;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  background: #e7f1ff;
}
1
2
3
4
5
6
7
8
9
10

CSS Grid FAQ – display: grid

display: grid is a CSS property that makes a container a grid container. It allows you to organize content in rows and columns.

We use it when we want to create a complex layout with elements arranged in rows and columns, like dashboards, galleries, or pricing tables.

Grid is a 2D layout system (rows + columns), whereas Flex is a 1D layout system (row or column only).

You can create as many columns as you want using grid-template-columns. Example: grid-template-columns: 1fr 2fr 1fr;

fr stands for fraction. It represents a fraction of the available space in the container. Example: 2fr 1fr → first column is double width.

CSS Grid Container Properties

Category Property What It Does (Hindi) Example
Column grid-template-columns Columns का size और number set करता है grid-template-columns: 1fr 2fr;
Column column-gap Columns के बीच spacing देता है column-gap: 20px;
Column grid-auto-columns Auto-created columns की default width set करता है grid-auto-columns: 100px;
Row grid-template-rows Rows की height set करता है grid-template-rows: 50px 100px;
Row row-gap Rows के बीच spacing देता है row-gap: 15px;
Row grid-auto-rows Auto-created rows की default height set करता है grid-auto-rows: 80px;
Row + Column gap Rows और columns दोनों में spacing देता है gap: 10px 20px;
Row + Column grid-template-areas Named grid layout define करता है "header header" "sidebar main"
Container display: grid Element को grid container बनाता है display: grid;
Container justify-content Grid को horizontally align करता है justify-content: center;
Container align-content Grid को vertically align करता है align-content: space-between;
Container place-content align-content + justify-content shorthand place-content: center;
Grid Items align-items Grid items का vertical alignment set करता है align-items: center;
Shorthand grid Columns, rows, areas, auto-flow का shorthand grid: 100px / 1fr 2fr;
Shorthand grid-template Columns, rows और areas का shorthand grid-template: "h h" 50px / 1fr 1fr;
Link