Glossary

CSS Grid

CSS Grid is a two-dimensional layout system in CSS. It lets you place elements across rows and columns simultaneously. Ideal for complex page layouts, card grids, and any two-dimensional structure.

Basics

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;    /* 3 equal columns */
  grid-template-columns: repeat(3, 1fr); /* same thing */
  grid-template-columns: 200px 1fr 2fr;  /* mixed units */
  gap: 20px;                             /* gutters */
}

/* Element spanning 2 columns */
.featured {
  grid-column: span 2;
}

Auto-fill vs Auto-fit

/* As many cards as fit (min 250px each) */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Named Areas

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header { grid-area: header; }