Sharing is Caring

Subgrid

form {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr;

  .input-group {
    grid-column: span 2;
    grid-template-columns: subgrid;

    align-items: baseline;
    justify-items: end;
  }
}

Subgrid

.card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.card {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing.

Omnis, veritatis odio.

Enim molestiae recusandae ut dolor sit amet consectetur adipisicing.

Exercitationem, libero quam!

Error maiores culpa eaque.

Quibusdam, recusandae odio.

Corporis laboriosam, neque est commodi architecto.

Modi, exer citat ionem dicta.

Laboriosam, aliquam tempore minus dolorem ullam et veniam asperiores?

Dolore.

Reprehenderit, labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aut.

Nth Child Of <S>

li.important:nth-child(-n + 3) {
  border: 3px dashed var(--c-accent);
}
:nth-child(-n + 3 of li.important) {
  outline: 3px dashed red;
}

1. Important
2. Not Important
3. Important
4. Not Important
5. Not Important
6. Not Important
7. Important
8. Not Important
9. Important
10. Not Important

:has()

li.important:nth-child(-n + 3) {
  border: 3px dashed var(--c-accent);
}
:nth-child(-n + 3 of li.important) {
  outline: 3px dashed red;
}