01 — CSS Grid & Flexbox Deep Dive

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Track sizing */
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-rows-2 { grid-template-rows: repeat(2, auto); }
 
/* Item placement */
.col-start-1 { grid-column-start: 1; }
.col-end-3 { grid-column-end: 3; }
.row-span-2 { grid-row: span 2; }
 
/* Alignment */
.justify-items { justify-items; }
.align-items { align-items; }
.justify-content { justify-content; }
.align-content { align-content; }

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 1rem;
}
 
.flex-1 { flex: 1 1 auto; }
.flex-none { flex: none; }
.order-1 { order: 1; }