Basic Container Queries with CSS. Using Normal CSS.
Basic Container Queries
Container Queries are a new way to write CSS that can adapt to the size of the container instead of the size of the viewport. This is a huge change in how we write CSS and will make it much easier to write components that look great on any size screen.
To make this work, we need to use a new CSS property called container-type. This property tells the browser what type of container we want to use for our layout. There are three types of containers: block-size, inline-size, and size.
.grid-item {
container-type: inline-size;
}Now to change container look.
@container (min-width: 500px) {
}
@container (min-width: 900px) {
}