Surveys / State of CSS 2022
This survey closed on October 30, 2022. View Survey Results »

1/14Layout

  1. Subgrid
  2. CSS Writing Modes
  3. CSS Logical Properties
  4. aspect-ratio
  5. content-visibility
  6. gap property for flexbox
  7. @container Queries
  8. object-view-box
  9. Small, Large, and Dynamic Viewport Units
  10. Media Queries Range Contexts

css 
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.item {
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
}

css 
.vertical-text {
  writing-mode: vertical-lr;
}

margin-block-start, padding-inline-end, border-inline-start…

css 
section {
  border-block: 8px solid blue;
  border-inline: 8px solid green;
}

css 
.square {
  aspect-ratio: 1 / 1;
}

css 
.card {
  content-visibility: auto;
  contain-intrinsic-size: 350px;
}

css 
section {
  display: flex
  gap: 1em 2em;
}

Including size and style queries
css 
@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

css 
img {
  aspect-ratio: 1;
  width: 300px;
  object-view-box: inset(25% 20% 15% 0%);
}

lvh / lvw / lvmin / lvmax, sv*, dv*, etc.

css 
body {
  height: 100dvh;
}

css 
@media (400px < width < 1000px) {
  /* ... */
}
Next sectionShapes & Graphics