Adaptive layout with Media Queries and CSS Regions

Hint: resize the browser window to see the page layout gradually change from three columns to one column.

Media Queries work together with CSS Regions to create highly adaptive layouts where content is not bound to boxes.

Code sample

@media screen and (max-width: 480px){
    #region1{
        width: 100%;
        flow-from: article;
    }
    
    #region2,
    #region3{
        display: none;
    }                 
}    

Remove '#region2' and '#region3' from the region chain. Content is rendered only in '#region1' on narrow screens.

Using Media Queries

Traditionally developers could define constraints for layout boxes with @media queries. However, in some cases, that meant hiding some content.

With CSS Regions and Media Queries the content can be moved around independently of the original containers it comes in. This opens up possibilities for rich and adaptive layouts with full control over the display of the content.