Blog

In HTML and CSS, it's not uncommon to need a layout where you have two columns side-by-side on wide screens:

but both collapse into a single column on narrow screens such as mobile devices:

Let's start with some basic HTML:

<div class="container">
  <div class="two-columns">
    <div class="one">
      Hello from column 1
    </div>
    <div class="two">
      Hello from column 2
    </div>
  </div>
</div>

There's several ways to accomplish this design, but one of the most elegant is using CSS grid. Here's some example CSS that uses grid layout:

.container {
  container-type: inline-size;
}

.two-columns {
  display: grid;
  gap: 8px;
  /* One column by default */
  grid-template-columns: 1fr;
}

@container (width > 500px) {
  .two-columns {
    /* Two columns on wider screens */
    grid-template-columns: 1fr 1fr;
  }
}

Here's a JSFiddle with the final HTML and CSS: https://jsfiddle.net/Daniel15/gefuncyp/1/

Pretty simple, right? This CSS snippet uses several newer CSS features:

Container queries

Most web developers know about media queries, which let you apply particular CSS styles based on the size of the screen. They are very commonly used for responsive design, which is a design technique where a web site works well regardless of screen width.

Container queries are similar to media queries, except they let you apply styles based on the size of the container element. In this case, we're saying that we want to show two columns only when the width of the container is greater than 500px. Defining break points based on the element rather than the screen makes the whole thing more reusable. This is useful if the element is embedded inside an existing app that might have its own sidebar, padding, etc.

fr units

fr units are fractional units, which are new with CSS grid. They represent a fraction of the available space. For example, a grid with two 1fr columns (like we're using for the desktop layout) will have two columns of equal width, effectively 50% minus the gap between them.

One way they're useful is if you want both fixed-width and flexible-width columns in the same grid. For example, grid-template-columns: 80px 2fr 1fr 100px creates four columns: The leftmost and rightmost columns have a fixed width of 80px and 100px respectively, while the inner columns consume 66.67% (2/3) and 33.33% (1/3) of the left over width respectively.

Conclusion

Newer CSS functionality such as CSS grid make things like this way easier than it used to be in the past, when we had to mess with floats to get multi-column layouts working correctly. I use flexbox more than CSS grid, but both are extremely useful tools to have. CSS grid has widespread support so now's the time to start learning about it if you haven't already!