Cheat Sheets - CSS

display: grid;
grid-template-columns: 2fr 200px 1fr; /* fr = fractional unit */
grid-gap: 1rem;

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

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

grid-column: 1 / 3; /* span columns 1-2 */
grid-row: 2 / 4; /* span rows 2-3 */

display: flex;
flex-direction: row; /* row | column | row-reverse | column-reverse */
justify-content: space-between; /* main axis alignment */
align-items: center; /* cross axis alignment */

display: flex;
justify-content: center;
align-items: center;

flex: 1 1 auto;
/* flex-grow flex-shrink flex-basis */

display: flex;
flex-wrap: wrap;
gap: 1rem;

/* Mobile styles first */
.container { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
}

/* Desktop styles first */
.container { width: 1200px; }

@media (max-width: 768px) {
  .container { width: 100%; }
}

@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet only */
}

:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

font-size: clamp(1rem, 4vw, 2rem); /* min, preferred, max */

/* When you can't use flex or grid */
.center {
  position: absolute;
  inset: 0; /* shorthand for top:0 right:0 bottom:0 left:0 */
  margin: auto;
  width: fit-content;
  height: fit-content;
}

.video-container {
  aspect-ratio: 16 / 9; /* width / height */
  width: 100%;
}