CSS Grid

CSS Grid is a two-dimensional layout system — it controls rows and columns simultaneously, making it ideal for page layouts and complex arrangements.

.container {
  display: grid;

  /* 3 equal columns using fr (fraction of available space) */
  grid-template-columns: repeat(3, 1fr);

  /* Mixed: fixed sidebar + flexible content */
  grid-template-columns: 250px 1fr;

  /* Responsive columns — NO media queries needed! */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  /* Define row heights */
  grid-template-rows: 64px auto 80px;

  /* Named template areas */
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";

  gap: 24px;
}

/* Place items using template areas */
.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer;  }

/* Span across columns/rows */
.featured {
  grid-column: 1 / 3;   /* span 2 columns */
  grid-column: span 2;  /* shorthand */
  grid-row: span 2;     /* span 2 rows */
}

Named areas layout example:

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}