📦 display: grid — The Foundation of CSS Grid Layout

🌐 What is display: grid?

display: grid is the property that transforms an element into aGrid Container. Without this property, none of the CSS Grid features work. It activates the two-dimensional layout system that allows you to control rows, columns, spacing, and alignment with incredible precision.

>>“Everything in CSS Grid starts with a single line: display: grid.”

📌 How to Use display: grid

Basic Grid Activation

.container {
  display: grid;
}

Once display: grid is applied, all direct children of the container automatically become grid items.

🏗️ Why Use display: grid?

  • Enables 2D layout (rows + columns)
  • Makes complex layouts simple and clean
  • Reduces dependency on floats, tables, and Flexbox wrappers
  • Perfect for responsive designs
  • Allows precise alignment and spacing

🔍 display: grid vs display: inline-grid

ValueDescription
gridCreates a block-level grid container
inline-gridCreates an inline-level grid container that flows with text

Inline Grid Example

.inline-box {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

📐 Adding Structure Using Grid Properties

After using display: grid, you can define rows and columns:

Grid with Rows & Columns

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto 80px;
}
Media content

🧠 Example: Simple Three-Column Layout

3 Column Grid

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

.item {
  background: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
}

📊 Grid Behavior After display: grid

  • Children become grid items
  • Grid lines are created automatically
  • You can position items precisely using grid lines
  • Implicit and explicit tracks are generated

Note

💡 Tip: You don’t need to specify rows or columns for Grid to work — it auto-creates tracks when items overflow.

🧭 display: grid with Responsive Layouts

Responsive Grid Example

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

This automatically adjusts the number of columns based on screen width — without media queries.

🧩 Common Use Cases

  • Website layout: header, sidebar, content, footer
  • Image galleries
  • Card grids
  • Dashboards
  • Feature sections

⚠️ Common Mistakes

  • Forgetting to add grid-template-columns → results in a single column
  • Using display: flex when 2D layout is needed
  • Applying grid properties to children instead of the container

Note

⚡ Grid is not a replacement for Flexbox. Use Grid for 2D layout and Flexbox for 1D alignment.

🔥 Summary

display: grid is the first and most essential step in creating CSS Grid layouts. It turns a normal block element into a powerful layout engine capable of handling complex, responsive, and modern UI structures with minimal code.

>>“Master display: grid, and the entire Grid system opens up to you.”

Learn more atMDN Docs 📘