TIL: CSS Container Queries
#css
#til
Container queries let you style elements based on their container’s size rather than the viewport. This is huge for component-based design!
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Finally, truly responsive components that don’t care where they’re placed.