HTML/CSS
Introduction to CSS Grid
1 / 5

Introduction to CSS Grid

CSS Grid is a powerful 2D layout system

code 
.container {
  display: grid;
}
Grid Columns
2 / 5

Grid Columns

Define your column structure

code 
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
Grid Gap
3 / 5

Grid Gap

Add spacing between grid items

code 
.container {
  display: grid;
  gap: 20px;
}
Grid Areas
4 / 5

Grid Areas

Name and place items in specific areas

code 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }