🌐 What Are Grid Container Properties?

Grid Container Properties are the CSS rules applied to the parent elementthat activates and controls the entire grid layout. These properties determine how rows, columns, gaps, alignment, and auto-placement behave.

🏗️ 1. display: grid / inline-grid

This property transforms an element into a grid container.

.container {
  display: grid;        /* Block-level grid */
}

.inline-container {
  display: inline-grid; /* Inline-level grid */
}

📐 2. grid-template-columns

Defines the width of each column in the grid. Accepts values like px, %, fr, auto, minmax(), and repeat().

grid-template-columns: 200px 1fr 2fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: minmax(150px, 1fr) 2fr;

📏 3. grid-template-rows

Defines the height of rows in a similar way to columns.

grid-template-rows: 100px auto 80px;
grid-template-rows: repeat(4, minmax(100px, auto));

🗺️ 4. grid-template-areas

Creates named layout regions that make grid structures easy and visual.

grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";

🔄 5. grid-auto-flow

Controls how auto-placed items fill the grid. Options: row | column | dense

grid-auto-flow: row;       /* default */
grid-auto-flow: column;
grid-auto-flow: row dense;  /* fills gaps smartly */

📦 6. grid-auto-rows & grid-auto-columns

Specifies sizes for rows or columns created implicitly (not defined in template).

grid-auto-rows: 150px;
grid-auto-columns: minmax(100px, auto);

🧩 7. gap, row-gap, column-gap

Defines spacing between grid items. Formerly known as grid-gap.

gap: 20px;           /* row + column */
row-gap: 10px;
column-gap: 20px;

🎛️ 8. justify-items / align-items / place-items

Controls item alignment inside their grid cells.

justify-items: start | center | end | stretch;
align-items: start | center | end | stretch;
place-items: center;  /* shorthand */

🧭 9. justify-content / align-content / place-content

Aligns the entire grid within the container.

justify-content: center;
align-content: space-between;
place-content: center;

🧠 Understanding Explicit vs Implicit Grid

Explicit Grid

Defined using grid-template-rows, grid-template-columns, or grid-template-areas.

Implicit Grid

Automatically generated tracks when items overflow the defined grid. Controlled using grid-auto-rows and grid-auto-columns.

📊 Grid Container Properties Overview Table

🎯 Summary

Grid Container Properties define the full structure and behavior of a grid layout. By mastering these, you control spacing, alignment, auto-placement, and layout flow with precision and elegance.

Learn more:MDN Grid Docs 📘