“Smart” Layouts With Container Queries

DigitalOcean provides cloud resources that are easy to navigate at any stage of a user's journey. An increasingly popular tool, Modern CSS, offers easier solutions to older problems, as well as new opportunities such as container queries. Container queries allow developers to determine the minimum size they want a column to be, based on the container size. Another benefit is that they can look at the font size of the container itself. However, they require a defined container, and changes can't be made from within the container itself. While media queries look at the initial browser size before any values or styles are applied, container queries open more exciting possibilities by not having to worry about such limitations. However, using custom properties for breakpoints has its downside as it's currently not supported, but it is expected to change in time. As a general note, using these approaches with grid is generally easier than with flexbox due to the flexbox algorithm's limitations.