CSS Snippets

/* Flexbox (most common) */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid (shortest) */
.parent {
  display: grid;
  place-items: center;
}

/* Absolute positioning */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (block elements) */
.child {
  width: fit-content;
  margin: auto;
}

/* Auto-responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Auto-fill vs auto-fit */
/* auto-fill: creates empty columns */
/* auto-fit: stretches columns to fill space */

.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Smooth shadow (multiple layers) */
.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.07),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07),
    0 32px 64px rgba(0,0,0,0.07);
}

/* Dark mode shadow */
.card-dark {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 4px 16px rgba(0,0,0,0.4);
}

/* Fade in from bottom */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Stagger children */
.stagger > * {
  animation: fadeInUp 0.4s ease-out backwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }