Modern CSS Features 2026: CSS Grid, Flexbox, and Container Queries

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

.item {
  grid-column: span 2;
}

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

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

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

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item {
  flex: 1 1 auto;
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 0;
}

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container style(prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
  }
}

.element {
  margin-block: 1rem;
  padding-inline: 1.5rem;
  border-block-width: 2px;
}

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery-item {
  scroll-snap-align: center;
  flex: 0 0 300px;
}

/* Style parent based on child */
.card:has(.badge) {
  padding-top: 2rem;
}

/* Style sibling based on sibling */
h1:has(+ p) {
  margin-bottom: 0;
}

.element {
  /* OKLCH - modern color space */
  background: oklch(70% 0.15 250);
  
  /* Light dark functions */
  background: light-dark(#fff, #000);
  
  /* Color mix */
  background: color-mix(in oklch, blue 50%, red);
}