Using Container Queries to Make a News Layout

February 24, 2023

csslayoutfrontend

Think of media queries as a bottle filled with different liquids that don’t mix, like oil and water. The shape and size of the container (bottle) will determine how the content (water/oil) appears. Although liquids have predetermined properties that define how they exist inside the bottle. For example, oil floats because it is lighter than water. Ultimately, liquids are governed by their container, and you can’t make the oil shaped as a globe float inside the region water occupies.

But what if you have a glass sphere to contain the oil and then suspend it inside the bottle? That’s what container queries do for CSS. Container queries become the smaller glass container inside the bottle. Then, your content can follow the rules of that smaller container instead of depending on the rules of one bottle. This will allow you more flexibility in styling layouts.

Container queries enable you to apply styles to an element based on the size of the element’s container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.

• MDN: Css Container queries

Developers have been searching for a better way to style website elements, especially their positioning on a site. Although media queries are great for setting up page layouts, they are not the best solution for creating reusable, independent, and responsive components. Ideally, we need a UI component that can be placed anywhere on a site, and it would automatically adjust itself based on the configuration of its container. Using the container dimensions instead of the viewport, we can more accurately style an element based on the available space rather than the browser viewport width. In the past, developers had to resort to JavaScript to achieve this functionality, but adding more scripts to a page can be inconvenient and unnecessary. Along comes container queries.

How to do container queries

There are two steps to making container queries in CSS.

1. Set up a container
2. Define styles in container query

1. Set up a container

To start using container queries, we first define a container or wrapper element with a container type.

.section-container {
  container: my-container / inline-size;
}

In the CSS above, we are using the shorthand way of defining a container. The first value is the name we want to identify the container query the second value is the container type. It is equivalent to the CSS below.

.section-container {
  container-name: my-container;
  container-type: inline-size;
}

2. Define styles in container query

A container query is similar to that a media query.

@container my-container (min-width: 800px) {
  // style here
}

These are the very minimum things you need to learn to use container queries. There are other things to know container units - I will leave that for a later post.

The experiment

To understand container queries better I did made an experiment. My idea was to create a news layout where the content is a bunch of cards with the same markup and content. Depending on how the container is configured the news cards will show in different ways.

I made a wireframe with the following:

1. Full-width hero card on top
2. A medium-sized news card
3. A news list with multiple content
4. A grid with multiple contents

I’ve configured the cards in the wireframe to show in different styles. For the full-width top section “stage”, I want the card to show as a hero element. In the medium “stage”, the card would look like a wide news card. With the news list stage, I placed multiple cards that will show as a text list with no images. In the final grid “stage”, I wanted to show a news grid with multiple cards.

Also not to forget, on smaller screens(e.g. mobile) all the cards will show as one column card grid.

Remember that all these cards have the same markup. Imagine you have a server-side rendered(SSR) endpoint that returns an array of cards with similar markup sorted by descending date(e.g news post). Then you just drop all this content in different containers until you fill the layout. No need to cherry pick the data and render to different locations.

Check the pen here for a demo.

What I learned

During the experiment, I learned a few things about using container queries. Container queries might seem challenging at first, but once you become familiar with them it gets easier. You will be amazed at how much it can improve your layout designs.

Note that container queries aren’t limited to querying width. We can also use container-type: size to query container height, which opens up even more possibilities for creating layouts. Like when I created a news text wall by using the height of the container to hide the images and only render the text. It made my news card’s styling “smarter” without complicated CSS class combinations or JavaScript. I wish we had container queries a decade ago.

.stage {
  container-name: stage;
  container-type: size;
}

@container stage (width > 768px) and (height = 1000px) {
  .card {
    width: calc(100% / 3);
  }
}

Wrapping up

Container queries are another great tool in a web developer’s toolbelt. I would recommend spending some time learning the basics and how it interacts with layout-specific CSS like flexbox and grids. I would also suggest spending time learning the differences between container types and how to use container units.

Cheers!