CSS Container Queries

CSS Container Queries is a modern approach for responsive web design that allows for more flexible layouts. They allow elements to respond to the width of their containers rather than the viewport. The designs can be adjusted based on the inline-size, or width of the card-grid. If the container-type is not specified, it defaults to 'normal' which refers to style containers by default. The container’s CSS styles can be queried allowing conditional styling if certain styles match. This is possible in modern web browsers as an experimental feature with limited browser support. All elements are considered containers by default and are position: relative so there's no need to declare it unless a CSS Container Size Query is needed instead. Usage of the CSS container-name is optional unless used to select a specific container by name. Noticeable difference in syntax is that @container is used instead of @media and the use of style() function to hold the matching condition. The CSS Container Queries are defined in the CSS Containment Module Level 3 specification with broad support in comparison to style queries.