CSS Grid Layout

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 fixed columns */
  gap: 1rem;  /* space between cells */
}

/* fr unit = fraction of available space */
.grid { grid-template-columns: 1fr 1fr 1fr; }  /* 3 equal columns */
.grid { grid-template-columns: 2fr 1fr; }       /* 2/3 + 1/3 */

/* repeat() shorthand */
.grid { grid-template-columns: repeat(3, 1fr); } /* same as 1fr 1fr 1fr */
.grid { grid-template-columns: repeat(4, 250px); }

/* Mixed: fixed sidebar + flexible main */
.page { grid-template-columns: 280px 1fr; }

/* auto-fit + minmax = responsive without media queries! */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  /* creates as many 280px+ columns as fit — responsive! */
}

.header {
  grid-column: 1 / -1;  /* span full width (from col 1 to last) */
}

.sidebar {
  grid-row: 1 / 3;     /* span 2 rows */
  grid-column: 1 / 2;  /* column 1 only */
}

.featured {
  grid-column: span 2; /* span 2 columns from current position */
}

.page {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

header  { grid-area: header;  }
.sidebar{ grid-area: sidebar; }
main    { grid-area: main;    }
aside   { grid-area: aside;   }
footer  { grid-area: footer;  }