CSS Grid Layout

What Is It?

Grid arranges direct children in rows and columns. It is useful when both horizontal and vertical relationships matter.

Properties, Tags and Attributes Explained

• grid-template-columns: Defines column tracks.
• fr: Shares available free space between flexible tracks.
• repeat(): Repeats a track definition.
• minmax(): Sets a minimum and maximum track size.
• grid-column: Places or spans a grid item across column lines.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Two columns

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Layout</title>
  <style>
    .grid { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
    .grid > div { padding: 16px; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="grid"><div>Sidebar</div><div>Main content</div></div>
</body>
</html>

What you see: The right column receives twice the flexible space of the left.

Example 2: Auto-fitting cards

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Layout</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
    article { background: #dcfce7; padding: 16px; }
  </style>
</head>
<body>
  <div class="grid"><article>HTML</article><article>CSS</article><article>JavaScript</article></div>
</body>
</html>

What you see: As the preview narrows, fewer columns fit and cards move to new rows.

When and Where to Use It

Choose Grid for galleries, dashboards, and page regions with rows and columns. Flexbox is often simpler for a single toolbar.

Common Mistake or Useful Tip

The min(100%, 150px) minimum prevents a 150px card track overflowing a narrower container.

Try It Yourself

Change the first grid to repeat(2, 1fr).