CSS Grid

/* fixed widths */
grid-template-columns: 200px 1fr 200px;
 
/* equal columns */
grid-template-columns: repeat(3, 1fr);
 
/* responsive — auto-fit wraps */
grid-template-columns:
  repeat(auto-fit, minmax(250px, 1fr));

/* explicit row heights */
grid-template-rows: auto 1fr auto;
 
/* all rows same size */
grid-auto-rows: 200px;
 
/* min height, can grow */
grid-auto-rows: minmax(100px, auto);

gap: 1rem;           /* rows + columns */
row-gap: 1rem;       /* rows only */
column-gap: 2rem;    /* columns only */
gap: 1rem 2rem;      /* row column */

/* span columns */
grid-column: span 2;
grid-column: 1 / 3;     /* col 1 to 3 */
grid-column: 1 / -1;    /* full width */
 
/* span rows */
grid-row: span 3;
grid-row: 1 / 4;        /* row 1 to 4 */

/* align all items in their cells */
justify-items: start;   /* horizontal */
align-items: center;     /* vertical */
place-items: center;     /* both */
 
/* align the grid inside container */
justify-content: center;
align-content: center;
place-content: center;   /* both */

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
 
/* assign children */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}

.container {
  display: grid;
  place-content: center;
  min-height: 100vh;
}
 
/* single line centering — vertical + horizontal */

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
 
/* equal height cards automatically */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
 
.wide {
  grid-column: span 2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
 
.full {
  grid-column: 1 / -1; /* first to last line */
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
 
.tall {
  grid-row: span 3;
}

.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
 
/* no media queries — wraps automatically */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
 
.hero {
  grid-column: span 2; /* full-width hero */
}

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
 
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
 
.nav   { grid-column: span 4; }
.chart { grid-column: span 2; }
.table { grid-column: span 4; }

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 20px;
  gap: 1rem;
}
 
.tall { grid-row: span 4; }
.mid  { grid-row: span 2; }

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
 
/* footer sticks to bottom even with
   little content — main fills the gap */