A layout system for rows and columns.

CSS Grid - Learn HTML | Revochamp

Name: CSS Grid
Availability: InStock
Author: Revochamp

What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to design layouts using rows and columns.

Grid Container

CSSRead-only

.container {
  display: grid;
}

.container {
  display: grid;
}

Grid Columns

CSSRead-only

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Grid Rows

CSSRead-only

.container {
  grid-template-rows: 100px 200px;
}

.container {
  grid-template-rows: 100px 200px;
}

Gap (Spacing)

CSSRead-only

.container {
  gap: 10px;
}

.container {
  gap: 10px;
}

Grid Item Placement

CSSRead-only

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

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

Repeat Function

CSSRead-only

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

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

Auto-Fit & Minmax

CSSRead-only

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

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

Alignment

CSSRead-only

.container {
  justify-items: center;
  align-items: center;
}

.container {
  justify-items: center;
  align-items: center;
}

Grid Properties Overview

Property	Description
display: grid	Defines grid container
grid-template-columns	Defines columns
grid-template-rows	Defines rows
gap	Spacing between items
grid-column	Column span
grid-row	Row span

Example Layout

CSSRead-only

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Flexbox vs Grid

Feature	Flexbox	Grid
Dimension	1D	2D
Use Case	Row/Column layout	Complex layouts
Alignment	Flexible	Precise

Best Practices

Use grid for complex layouts
Use repeat() for cleaner code
Use minmax for responsive design
Combine with flexbox when needed

Common Mistakes

Overcomplicating grid layouts
Not using responsive techniques
Confusing grid with flexbox
Incorrect grid placement values

Conclusion

CSS Grid is powerful for building modern layouts. It provides precise control over rows and columns for responsive design.

Property

Description

display: grid

Defines grid container

grid-template-columns

Defines columns

grid-template-rows

Defines rows

gap

Spacing between items

grid-column

Column span

grid-row

Row span

Feature

Flexbox

Grid

Dimension

Use Case

Row/Column layout

Complex layouts

Alignment

Flexible

Precise

What is CSS Grid?

Grid Container

Grid Columns

Grid Rows

Gap (Spacing)

Grid Item Placement

Repeat Function

Auto-Fit & Minmax

Alignment

Grid Properties Overview

Example Layout

Flexbox vs Grid

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

What is CSS Grid?

Grid Container

Grid Columns

Grid Rows

Gap (Spacing)

Grid Item Placement

Repeat Function

Auto-Fit & Minmax

Alignment

Grid Properties Overview

Example Layout

Flexbox vs Grid

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions