Modern
Layout Systems

1. CSS Grid & Subgrid

We all know `display: grid`. But Subgrid allows nested children to participate in the parent's grid.

1
2
3
.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  /* Hook into the parent's rows/cols! */
  grid-template-columns: subgrid; 
}

2. The Parent Selector :has()

The Holy Grail of CSS. Select a parent based on its children.

/* Select card ONLY if it contains an image */
.card:has(img) {
  grid-template-columns: 1fr 1fr;
}

/* Select label ONLY if the input next to it is checked */
input:checked + label {
  color: var(--color-primary);
}

/* Form validation styling on the group */
.form-group:has(input:invalid) {
  border-color: red;
}

3. Logical Properties

Stop using `margin-left`. What if the site is in Arabic (RTL)?

Use start and end instead.

Previous Next: Advanced →