CSS Grid Display

🧩 What display: grid Does

CSS Grid is a two‑dimensional layout system that lets you arrange elements in rows and columns. It’s far more powerful and flexible than older layout methods like floats or inline‑block.

• It creates a grid container (the parent).
• Its direct children become grid items.
• You can control spacing, alignment, sizing, and even overlapping.

CSS Grid is ideal for full‑page layouts, dashboards, galleries, and any design that needs structured alignment.

🧱 Basic Example

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
}

<div class="container">
  <div>Left</div>
  <div>Main</div>
  <div>Right</div>
</div>

This creates a 3‑column layout:

• fixed 200px
• flexible column
• fixed 200px

🧭 Key Concepts

1. Grid Container

Set with:

display: grid;

or

display: inline-grid;

2. Defining Rows & Columns

grid-template-columns / grid-template-rows

You can use:

• fixed units (px)
• flexible units (fr)
• percentages
• auto
• minmax()
• repeat()

Example:

grid-template-columns: repeat(3, 1fr);

3. Gap Between Items

gap: 10px;

This sets spacing between rows and columns.

4. Placing Items

Grid items can be positioned using line numbers:

.item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

MDN notes that Grid supports overlapping and layering similar to positioned elements.

5. Auto‑Fill and Auto‑Fit

Responsive magic:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

This creates as many columns as will fit, each at least 200px wide.

🆚 Grid vs Flexbox

🎯 Summary

CSS Grid gives you:

• precise control over rows and columns
• powerful responsive layouts
• clean, semantic structure
• the ability to overlap and layer items