CSS Cheatsheet

Container setup

.container {
  display: flex;
  flex-direction: row; /* row | column */
  flex-wrap: wrap;
  justify-content: space-between; /* main axis */
  align-items: center;  /* cross axis */
  gap: 1rem;
}

justify-content values

flex-start | flex-end | center
space-between | space-around | space-evenly

align-items values

flex-start | flex-end | center | stretch | baseline

Flex item

.item {
  flex: 1;           /* grow + shrink + basis */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  align-self: center; /* override parent */
}

Center anything

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid container

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

Named areas

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

Span columns/rows

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

auto-fill vs auto-fit

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* auto-fit collapses empty tracks */

Use auto-fit for responsive grids where you want items to stretch.

place-items shorthand

.grid { place-items: center; } /* align-items + justify-items */

Basic selectors

div        /* element */
.class     /* class */
#id        /* id */
*          /* universal */

Combinators

div p      /* descendant */
div > p    /* direct child */
h1 + p     /* adjacent sibling */
h1 ~ p     /* general sibling */

Pseudo-classes

:hover  :focus  :active
:first-child  :last-child  :nth-child(2)
:not(.disabled)  :is(h1, h2, h3)

Pseudo-elements

::before  ::after
::placeholder  ::selection
::first-line  ::first-letter

Attribute selectors

[type="text"]
[href^="https"]   /* starts with */
[href$=".pdf"]    /* ends with */
[class*="btn"]    /* contains */

Define & use

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

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

Fallback value

color: var(--color-text, #111);

Override in component

.card {
  --color-primary: #10b981; /* local override */
}

position values

static   /* default, no offset */
relative /* offset from normal flow */
absolute /* relative to nearest positioned ancestor */
fixed    /* relative to viewport */
sticky   /* hybrid: relative until scroll threshold */

Absolute centering

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

Sticky header

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

transition

.btn {
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn:hover { transform: scale(1.05); }

@keyframes

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeIn 0.3s ease forwards;
}

animation shorthand

animation: name duration timing-function delay iteration-count direction;