CSS Grid

CSS Grid is a layout system for rows and columns together. Make a container with display: grid, and describe the columns, and the items fall into the cells.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

---

The fr unit

fr means “fraction of the free space”. 1fr 2fr makes two columns, the second twice as wide as the first. You can mix units.

grid-template-columns: 200px 1fr;          /* fixed sidebar and flexible content */
grid-template-columns: repeat(4, 1fr);    /* four equal columns */

---

Container properties

Property	Use
grid-template-columns	Sizes of the columns
grid-template-rows	Sizes of the rows
gap	Space between cells
justify-items, align-items	Alignment of items inside their cells

---

Span cells

.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.header { grid-column: 1 / -1; }   /* from first to last line */

---

Responsive grid without media queries

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

This makes as many columns as fit, each at least 200px wide. On a phone the cards stack by themselves.

---

Summary

• display: grid with grid-template-columns makes a grid.
• Use fr, repeat() and gap.
• Use auto-fit with minmax() for responsive cards.
• Next: Pseudo-classes and pseudo-elements.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.