P2.6: CSS Grid Layouts

CSS Grid is the most powerful 2-dimensional layout engine in web design, allowing layouts to align across rows and columns simultaneously.

1. Grid Column and Row Templates

Define grids with columns and rows:

• grid-template-columns: Defines vertical tracks (uses fr fractional unit).
• grid-gap / gap: Defines grid spacing.
• grid-template-areas: Maps layout templates directly using semantic strings.

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

Jen SimmonsProfile ↗

Real-World Case Study

18 Years Exp

AboutStackQuote

RoleCSS Grid Evangelist & Designer

Salary₹82 Lakhs/yr equivalent

CompanyApple / WebKit