Using media queries and grid CSS to reflow columns

Metadata

css

sufficient

When to Use

CSS

Description

The objective of this technique is to be able to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for text intended to scroll horizontally. This is done by using layout techniques that adapt to the available viewport space.

Grid layouts define layout regions that reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same when done right. This is an effective way to create designs that present well on different devices and for users with different content-size preferences.

The basic principles of grid layouts are to:

  1. Define the size of layout regions using grid properties and media queries for specific viewport sizes, so they enlarge, shrink or wrap in the available space and respond to zoom levels;
  2. Position the layout regions in the grid container as a row of adjacent grid items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.

Use of grid layout CSS can cause a keyboard navigation disconnect by making the visual layout and source-code order different. The CSS Grid Layout Module Level 1 warns against re-ordering content by grid item placement as they cause an incorrect focus order for keyboard users and others.

Examples

Grid layout in HTML and CSS - Medium complexity

The following medium complexity example uses HTML and CSS to create a grid layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.

The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses fr units as a fraction of the free space of the grid container for the grid items by using the "grid-template-columns" property and are laid out in source order.


  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>CSS: Using media queries and grid CSS to reflow columns</title>
        <style>

        /* Reflow Styling */
        header { grid-area: header; }
        main   { grid-area: main; }
        aside  { grid-area: aside; }
        footer { grid-area: footer; }

        .grid,
        .subgrid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
        }

        .grid {
          grid-template-areas:
          'header'
          'main'
          'aside'
          'footer';
          width: 100%;
        }

        .subgrid {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
        }

        .grid-item,
        .subgrid-item {
          padding: 1rem;
        }

        @media all and (min-width: 576px) {
          .subgrid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            margin-bottom: 1rem;
          }
          .subgrid-item {
            padding-bottom: 0.25rem;
          }
        }

        @media all and (min-width: 992px) { 
          .grid {
            grid-template-areas:
              'header header header'
              'main main aside'
              'footer footer footer';
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
          }
        }

        </style>

      </head>

      <body class="grid">

        <header class="grid-item">
          ...
        </header>

        <main class="grid-item">        
          ...
          ...
          <div class="subgrid">
            <div class="subgrid-item">
              ...
            </div>
            <div class="subgrid-item">
              ...
            </div>
          </div>
        </main>

        <aside class="grid-item">
          ...
        </aside>

        <footer class="grid-item">
          ...
        </footer>

      </body>
    </html>

Working example: Using media queries and grid CSS to reflow columns

Tests

Procedure

  1. Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.
  2. Zoom in by 400%.
  3. For content read horizontally, check that all content and functionality is available without horizontal scrolling.
  4. For content read vertically, check that all content and functionality is available without vertical scrolling.

If the browser is not capable of zooming to 400%, you can reduce the width or height of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.

Expected Results

Check that #3 and #4 are true.

Related resources