CSS Grid Complete Guide

Introduction

CSS Grid is a powerful layout system for creating two-dimensional layouts on the web. This guide covers everything from basic grids to complex responsive layouts.

---

Step 1: Setting Up a Grid Container

Make a parent element a grid container using `display: grid`:

```css .container { display: grid; gap: 10px; /* spacing between grid items */ } ```

---

Step 2: Defining Columns and Rows

Use `grid-template-columns` and `grid-template-rows`:

```css .container { grid-template-columns: 1fr 2fr 1fr; /* three columns / grid-template-rows: 100px 200px; / two rows */ } ```

---

Step 3: Placing Items

You can place items using `grid-column` and `grid-row`:

```css .item1 { grid-column: 1 / 3; /* spans from column 1 to 2 / grid-row: 1 / 2; / occupies first row */ } ```

---

Step 4: Auto-Placement & Repeat

Use `repeat()` for automatic column creation:

```css .container { grid-template-columns: repeat(3, 1fr); /* three equal columns */ } ```

---

Step 5: Responsive Grid

Combine Grid with media queries for responsiveness:

```css @media (max-width: 768px) { .container { grid-template-columns: 1fr; /* single column on small screens */ } } ```

---

Step 6: Practical Example – Photo Gallery

Create a responsive gallery:

```html

<div class="gallery"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> \`\`\`

```css .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }

.item { background-color: #2196F3; color: white; padding: 40px; text-align: center; font-size: 1.2rem; } ```

---

Step 7: Tips & Best Practices

• Use `auto-fit` or `auto-fill` for flexible grids.
• Combine Grid with Flexbox for more complex layouts.
• Keep your layout semantic and maintainable.

---

Conclusion

CSS Grid simplifies building complex layouts while keeping your code clean. Practice by creating dashboards, galleries, and multi-column layouts.

---

SEO Suggestions:

• Main keywords: CSS Grid tutorial, CSS Grid layout, responsive CSS Grid, web design grid tutorial
• Meta description: Learn CSS Grid from basic setup to advanced responsive layouts with examples and practical exercises. Step-by-step guide for 2025.
• Catchy title suggestions: "CSS Grid Complete Guide 2025", "Master CSS Grid Layout: Step-by-Step Tutorial"