CSS Grid

CSS Grid is a two-dimensional layout system: you define rows and columns on a container and place items into the cells. It is the best tool for whole-page layouts and card galleries.

Basic Grid With fr Units

The fr unit means "one share of the free space". 1fr 2fr 1fr makes the middle column twice as wide as the others.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
.grid div { background: #bfdbfe; padding: 20px; text-align: center; font-family: sans-serif; }
</style>
</head>
<body>
<div class="grid">
  <div>1fr</div><div>2fr</div><div>1fr</div>
  <div>4</div><div>5</div><div>6</div>
</div>
</body>
</html>

Responsive Grid Without Media Queries

repeat(auto-fit, minmax(160px, 1fr)) creates as many columns as fit, each at least 160px wide. Resize the window to watch the columns change.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.gallery div { height: 100px; background: linear-gradient(135deg, #f472b6, #a78bfa); border-radius: 8px; }
</style>
</head>
<body>
<div class="gallery">
  <div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>

Spanning Rows and Columns

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 80px; gap: 8px; }
.grid div { background: #fed7aa; display: grid; place-items: center; font-family: sans-serif; }
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
</style>
</head>
<body>
<div class="grid">
  <div class="wide">span 2 columns</div><div class="tall">span 2 rows</div>
  <div>3</div><div>4</div><div>5</div><div>6</div>
</div>
</body>
</html>

Grid Template Areas

Name regions with grid-template-areas, then assign each element to an area. The layout reads like a picture of the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { margin: 0; font-family: sans-serif; }
.page {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 8px;
}
header { grid-area: header; background: #1e3a8a; color: white; padding: 16px; }
aside { grid-area: sidebar; background: #e0e7ff; padding: 16px; }
main { grid-area: main; padding: 16px; }
footer { grid-area: footer; background: #e5e7eb; padding: 12px; }
</style>
</head>
<body>
<div class="page">
  <header>Header</header><aside>Sidebar</aside>
  <main>Main content</main><footer>Footer</footer>
</div>
</body>
</html>

Frequently asked questions

What does fr mean in CSS Grid?

fr is a fraction of the free space in the grid container. Columns set to 1fr 1fr share the space equally.

What is the difference between auto-fit and auto-fill?

Both create as many columns as fit. auto-fit collapses empty tracks so items stretch to fill the row; auto-fill keeps the empty tracks.

Is CSS Grid supported in all browsers?

Yes. All modern browsers fully support CSS Grid, including subgrid in current versions.