Getting started with CSS container queries title. A vibrant gradient behind artwork representing a web browser and a mechanical keyboard.

As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let’s find out.

To understand how container queries are helpful, let’s look at an example news feed layout and see where we could apply them. The news feed is a collection of articles, each with an image, a headline, and a text summary. There’s also a sidebar on the right side of the page listing popular articles.

News feed layout shown on desktop

We can divide this into two grids: a 4-column grid on the left, and a single column on the right (the sidebar).

The news feed grid layout

On the left, we have a large featured article spanning four columns. Below this, two articles span two columns each. These have a horizontal layout, with the images on the left and text on the right. Below that are four smaller articles, each spanning a single column. A column of articles in the same style also appears on the right as a sidebar.

We might look at this layout and see three distinct styles of articles, all to be developed as separate components. But let’s see what happens to the design on smaller viewports.

Mobile and tablet versions of the news feed layout

At mobile sizes, the images are stacked above the text for all articles, including the featured article. Their layouts are indistinguishable. At slightly larger sizes, the articles take on a horizontal layout. On yet larger viewports (ones we might think of as approximately tablet-sized), there are two horizontal articles under the featured article, with four stacked articles below. In total, there are three different layouts for individual articles.

News feed layout shown on desktop

If we were to code this layout using media queries to query the viewport size, we might need to create separate components to deal with the behaviour of each of the different article layouts for various breakpoints. Our code can easily become a little unwieldy, and difficult to maintain.

Fitting content into the available space

Imagine an editor comes along and wants to place different content alongside our news feed. Our 5-column layout no longer looks good in the available space and must be redesigned. In this case, we could stack some of the articles vertically.

Our layout adjusted to accomodate additional content alongside

Using media queries to detect the width of the viewport, our layout cannot respond to the change in available space. Far better if we can query the width of a parent element — or container.

What are container queries?

Container queries allow us to query the size of an element, as opposed to the viewport, and style its descendants accordingly. We can use them in a similar way to media queries, but they provide us with far more flexibility when it comes to layout — and have the potential to greatly simplify our code.

Building a component layout with container queries

Let’s take a single article component as an example. We’ll walk through building the responsive article component layout using container queries.

Article component layout at three different sizes

Creating a container

Before we write a container query, we need a container element to query! In the case of our news feed layout, we need a container element that wraps each article to act as the container. As our grid is a list of articles, the container element for each article will be the

  • . We’ll give it a class of article-container, to avoid any confusion.

    The elements of our container query

    <ul class="grid">
      <li class="article-container">
        <article>...article>
      li>
      <li class="article-container">
        <article>...article>
      li>
      <li class="article-container">
        <article>...article>
      li>
      ...
    ul>
    

    We create a container using two CSS properties: container-name and container-type. container-name is optional, but it can be useful if we have multiple containers on a page, as it leaves us in no doubt as to which container we’re referring to. The container name can be anything we like. We’ll call this one “article”.

    For size-based container queries, the container-type should be inline-size. inline-size is a logical value, so it refers to the width when using a horizontal writing mode (the default), or the height for a vertical writing mode. size is the other possible value, but this refers to the CSS containment module, and as Stephanie Eckles explains in her Smashing Magazine article, it’s not relevant to us here.

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

    At the time of writing, it is not possible to query the block size.

  • Shorthand

    The shorthand container property allows us to set both the container name and container type (the container name is required for this.)

    .article-container {
      container: article / inline-size;
    }
    

    Querying the container

    Once we have defined our container, writing a container query is similar to writing a media query. When writing the query, we can choose to specify a name container, or we can omit this, in which case the query will use the closest container by default. If we haven’t defined a container, then our container query will behave a lot like a media query — which is to say, it will query the viewport size.

    We may it helpful to specify a named container so we can be sure of which container we are querying. This is particularly useful for layouts where we might have several nested containers.

    
    @container (width > 700px) {
      
    }
    
    
    @container article (width > 700px) {
      
    }
    

    Just like media queries, we can use as many as we like.

    <div class="article-container">
      <article>
        <img
          src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
          alt="Bluetit on a branch"
        />
        <div>
          <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
          p>
        div>
      article>
    div>
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      min-height: 100vh;
      padding: 1rem;
      background: lavender;
      font-family: Montserrat, sans-serif;
      line-height: 1.3;
    }
    
    img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
    
    .article-container {
      min-width: min(100%, 400px);
      max-width: 1200px;
      overflow: hidden;
      resize: both;
      border: 1px solid;
      padding: 1rem;
      background: #c4c4e1;
    }
    
    article {
      padding: 1rem;
      background: white;
    }
    
    article * {
      margin: 0;
    }
    
    h3 {
      font-size: 1.3em;
      margin-bottom: 0.2em;
      line-height: 1.24;
    }
    
    .article-container {
      container: article / inline-size;
    }
    
    article {
      display: grid;
      gap: 1rem;
    }
    
    @container article (inline-size > 500px) {
      
      article {
        grid-template-columns: 1fr 2fr;
      }
    }
    
    @container article (inline-size > 800px) {
      article {
        
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        font-size: 1.2rem;
      }
    
      h3 {
        font-size: 2rem;
      }
    }
    

    New media query syntax

    You might notice a slight difference in the way we have written these container queries compared with traditional media queries. Instead of min-width and max-width, we are using the media query range syntax. This has the advantage of making our queries more concise.

    
    @container (min-width: 700px) and (max-width: 900px) {
    }
    
    
    @container (700px <= width <= 900px) {
    }
    

    It’s also more conducive to use of logical properties. Rather than writing styles dependent on a minimum or maximum width, we can say “if the inline size is great than (or is less than) x, apply these styles”.

    Our previous container query example could be re-written to use inline-size instead of min-width.

    @container article (inline-size > 700px) {
      article {
        
      }
    }
    

    Nested containers

    In addition to our responsive article components, our grid layout itself needs to respond to the available space.

    Layout grid at three different sizes

    That means we need to create an additional container surrounding our grid. We’ll need to adjust our markup to include this extra wrapper element.

    <div class="grid-container">
      <ul class="grid">
        <li class="article-container">...li>
        <li class="article-container">...li>
        <li class="article-container">...li>
        ...
      ul>
    div>
    
    .grid-container {
      container: layout / inline-size;
    }
    

    We’ll write container queries to specify a two-column layout and four-column layout for our grid respectively, when there is enough space.

    <div class="grid-container">
      <ul class="grid">
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
      ul>
    div>
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      min-height: 100vh;
      padding: 0 1rem;
      background: lavender;
      font-family: Montserrat, sans-serif;
      line-height: 1.3;
    }
    
    img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
    
    article * {
      margin: 0;
    }
    
    h3 {
      font-size: 1.3em;
      margin-bottom: 0.2em;
      line-height: 1.24;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .grid-container {
      padding: 1rem;
      margin: 0 auto;
      max-width: 1400px;
      background: #b3b3d7;
    }
    
    .article-container {
      container: article / inline-size;
    }
    
    article {
      display: grid;
      gap: 1rem;
      padding: 1rem;
      background: white;
    }
    
    @container article (inline-size > 500px) {
      article {
        grid-template-columns: 1fr 2fr;
      }
    }
    
    @container article (inline-size > 800px) {
      article {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        font-size: 1.2rem;
      }
    
      h3 {
        font-size: 2rem;
      }
    }
    
    
    .grid {
      display: grid;
      gap: 1rem;
    }
    
    @container layout (inline-size > 800px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
      
      .article-container:first-child {
        grid-column: span 2;
      }
    }
    
    @container layout (inline-size > 1000px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    
      .article-container:first-child {
        grid-column: span 4;
      }
    
      .article-container:nth-child(2),
      .article-container:nth-child(3) {
        grid-column: span 2;
      }
    }
    

    If we resize the component, we can see that both our grid layout and the nested articles respond to the available space.

    Container units

    You may already be familiar with viewport units, which can be used for sizing elements relative to the viewport. Container units enable us to instead size elements relative to the container.

    Container units are useful for styling our article components. We could use them to specify padding and font size, reducing the need to adjust these for different breakpoints.

    The unit cqi is used to specify a percentage of the container’s inline size.

    article {
      padding: 4cqi;
    }
    

    (We don’t need to write these styles inside a container query. They will respond to the container, as long as one is defined.)

    To prevent the padding becoming too large or two small, we can use the clamp() function. This resolves to the middle value, so by passing in two fixed values in addition to our flexible cqi value we can ensure that the padding will never be smaller than 1rem or larger than 3rem.

    article {
      padding: clamp(1rem, 4cqi, 2rem);
    }
    

    Similarly, we can set the font size with the clamp function and container units.

    <div class="grid-container">
      <ul class="grid">
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
        <li class="article-container">
          <article>
            <img
              src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
              alt="Bluetit on a branch"
            />
            <div>
              <h3>Why all fossil fuels must decline rapidly to stay below 1.5Ch3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
              p>
            div>
          article>
        li>
      ul>
    div>
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      min-height: 100vh;
      padding: 0 1rem;
      background: lavender;
      font-family: Montserrat, sans-serif;
      line-height: 1.3;
    }
    
    img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
    
    article * {
      margin: 0;
    }
    
    h3 {
      font-size: 1.3em;
      margin-bottom: 0.2em;
      line-height: 1.24;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .grid-container {
      padding: 1rem;
      margin: 0 auto;
      max-width: 1400px;
      background: #b3b3d7;
    }
    
    .grid-container {
      container: layout / inline-size;
    }
    
    .grid {
      display: grid;
      gap: 1rem;
    }
    
    @container layout (inline-size > 800px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
      
      .article-container:first-child {
        grid-column: span 2;
      }
    }
    
    @container layout (inline-size > 1000px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    
      .article-container:first-child {
        grid-column: span 4;
      }
    
      .article-container:nth-child(2),
      .article-container:nth-child(3) {
        grid-column: span 2;
      }
    }
    
    .article-container {
      container: article / inline-size;
    }
    
    article {
      display: grid;
      gap: 1rem;
      padding: 1rem;
      background: white;
      padding: clamp(1rem, 4cqi, 2rem);
      font-size: clamp(1rem, 3cqi, 1.6rem);
    }
    
    h3 {
      font-size: clamp(1.4rem, 4cqi, 2.5rem);
    }
    
    @container article (inline-size > 500px) {
      article {
        grid-template-columns: 1fr 2fr;
      }
    }
    
    @container article (inline-size > 800px) {
      article {
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
      }
    }
    

    Browser support and fallbacks

    As of 2023, container queries are supported in all major browsers. We should be aware that not all users will have the latest browsers, however. If you need to cater for users of older browsers, there is an easy-to-use polyfill by the Chrome team.

    Style queries

    So far we’ve covered building a layout using container queries to query the inline size of an element. But container queries can apply to even more than that. We can also query an element’s styles applied with custom properties.

    In our example layout we might want to draw attention to “featured” articles with different styles. Setting a custom property in our markup, we can then apply styles to elements with a particular custom property value.

    <div class="grid-container">
      <ul class="grid">
        <li class="article-container">...li>
        <li class="article-container">...li>
        <li class="article-container" style="--featured: true">...li>
        ...
      ul>
    div>
    
    @container style(--featured: true) {
      article {
        border-radius: 0.2rem;
        background: pink;
        border: 1px solid deeppink;
        padding: clamp(1rem, 5cqi, 3rem);
      }
    }
    

    We don’t need to define a container, as every element automatically has style containment.
    Read more about style container queries in Una Kravets’ article.

    Limitations and browser support

    At the time of writing, Chrome and Edge support container style queries. They are not currently supported in Safari or Firefox.
    There is provision in the CSS Containment Module Level 3 specification for any property-value pairs to be queried, not just custom properties. No browsers yet support this, however.

    If we can query viewport size and element size using container queries, do we still need media queries at all? Absolutely! Media queries are used for querying so much more than size. We can detect users’ preferences with prefers-reduced-motion and prefers-color-scheme, to name just two.

    There could still be occasions where we need to style an element within a nested container according to the viewport size, and a media query might be the simplest way. But I predict that in the not too distant future, container queries will largely take the place of media queries when it comes to layout, while media queries will be largely reserved for other media features like the ones mentioned above.

    Summary

    Container queries give us more control over our responsive layouts, as well as helping us write more concise, robust and maintainable CSS. Now that they enjoy widespread browser support, it’s a great time to give them a try. The great thing is you don’t have to go all-in straight away: if there’s a component you’re struggling to build with media queries it’s worth taking a look at container queries, as they could be the answer you’re looking for.

    <div class="wrapper-container">
      <div class="wrapper">
        <main class="grid-container">
          <h2>Latest storiesh2>
          <ul class="grid">
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Bluetit on a branch"
                />
                <div>
                  <h3>
                    Why all fossil fuels must decline rapidly to stay below 1.5C
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Exercitationem, nihil explicabo adipisci iste saepe reiciendis.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1551802230-22c087b11df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE2MDN8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Tree at sunset"
                />
                <div>
                  <h3>
                    Africa's extreme weather has killed at least 15,000 people in
                    2023
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates.
                  p>
                div>
              article>
            li>
            <li class="article-container" style="--featured: true">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1589787787683-59c1409124c7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE2NTB8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Robin on a branch"
                />
                <div>
                  <h3>
                    Fixing the gaps in England's ‘biodiversity net-gain' policy
                  h3>
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae
                    sapiente quisquam voluptate omnis.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1546367564-e9be23af3d14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE5NzV8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Car driving in snow"
                />
                <div>
                  <h3>Factcheck: 21 misleading myths about electric vehiclesh3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1582032951374-314efb7ccb76?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE0Njd8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Arctic sea ice"
                />
                <div>
                  <h3>Global temperatures throughout mid-2023 shatter recordsh3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1509391366360-2e959784a276?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE3MDR8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Solar panels"
                />
                <div>
                  <h3>
                    UK renewables still cheaper than gas, despite auction setback
                    for offshore wind
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1679820024011-d7c428c47a36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE4MjZ8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Wind turbine from below"
                />
                <div>
                  <h3>
                    EU's use of fossil fuels for electricity falls 17% to ‘record
                    low' in first half of 2023
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
          ul>
        main>
    
        <aside class="grid-container">
          <h2>Popular this weekh2>
          <ul class="grid">
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1615053835734-7752878e939e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE5MDh8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Power plant"
                />
                <div>
                  <h3>
                    Plans for new oil and gas power plants have grown by 13% in 2023
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
            <li class="article-container">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1635351235165-23b8cd066ea6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjIwMjN8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Flooded city street"
                />
                <div>
                  <h3>
                    How climate change affects extreme weather around the world
                  h3>
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut
                    illo, possimus voluptates accusamus nihil culpa odit vitae.
                  p>
                div>
              article>
            li>
            <li class="article-container" style="--featured: true">
              <article>
                <img
                  src="https://images.unsplash.com/photo-1413882353314-73389f63b6fd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE3NjR8&ixlib=rb-4.0.3&q=80&w=400"
                  alt="Electricity pylons"
                />
                <div>
                  <h3>
                    How ‘Shared Socioeconomic Pathways' explore future climate
                    change
                  h3>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.p>
                div>
              article>
            li>
          ul>
        aside>
      div>
    div>
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      min-height: 100vh;
      background: whitesmoke;
      font-family: Montserrat, sans-serif;
      line-height: 1.3;
    }
    
    img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
    
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    h2 {
      padding-bottom: 0.2em;
      margin: 0 0 0.6em;
      border-bottom: 2px solid;
    }
    
    article * {
      margin: 0;
    }
    
    aside {
      background: #f5f8ff;
      padding: var(--gap);
    }
    
    .wrapper {
      max-width: 1650px;
      margin: 0 auto;
      padding: clamp(1rem, 10cqi, 3rem);
      background: white;
    }
    
    h3 {
      font-size: 1.3em;
      margin-bottom: 0.2em;
      line-height: 1.24;
    }
    
    .wrapper-container {
      container: wrapper / inline-size;
    }
    
    .wrapper {
      --gap: clamp(1rem, 5cqi, 2rem);
      display: grid;
      gap: var(--gap);
    }
    
    @container wrapper (min-width: 1250px) {
      .wrapper {
        grid-template-columns: 4fr 1fr;
      }
    }
    
    .grid-container {
      container: layout / inline-size;
    }
    
    .grid {
      display: grid;
      gap: var(--gap);
      margin-top: var(--gap);
    }
    
    @container layout (inline-size > 800px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
      .article-container:first-child {
        grid-column: span 2;
      }
    }
    
    @container layout (inline-size > 1000px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    
      .article-container:first-child {
        grid-column: span 4;
      }
    
      .article-container:nth-child(2),
      .article-container:nth-child(3) {
        grid-column: span 2;
      }
    }
    
    .article-container {
      container: article / inline-size;
    }
    
    article {
      display: grid;
      gap: calc(var(--gap) * 0.6);
      font-size: clamp(0.9rem, 3cqi, 1.75rem);
    }
    
    @container style(--featured: true) {
      article {
        position: relative;
        overflow: hidden;
        border-radius: 0.2rem;
        background: #e1e7f5;
        padding: calc(var(--gap) * 0.8);
      }
    
      article::before {
        content: "";
        width: 2.75rem;
        aspect-ratio: 1;
        position: absolute;
        top: -0.35rem;
        left: -0.35rem;
        border-radius: 50%;
        background-color: #7e9bde;
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg baseProfile='tiny' height='24px' id='Layer_1' version='1.2' viewBox='0 0 24 24' width='24px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cg%3E%3Cpath d='M9.362,9.158c0,0-3.16,0.35-5.268,0.584c-0.19,0.023-0.358,0.15-0.421,0.343s0,0.394,0.14,0.521 c1.566,1.429,3.919,3.569,3.919,3.569c-0.002,0-0.646,3.113-1.074,5.19c-0.036,0.188,0.032,0.387,0.196,0.506 c0.163,0.119,0.373,0.121,0.538,0.028c1.844-1.048,4.606-2.624,4.606-2.624s2.763,1.576,4.604,2.625 c0.168,0.092,0.378,0.09,0.541-0.029c0.164-0.119,0.232-0.318,0.195-0.505c-0.428-2.078-1.071-5.191-1.071-5.191 s2.353-2.14,3.919-3.566c0.14-0.131,0.202-0.332,0.14-0.524s-0.23-0.319-0.42-0.341c-2.108-0.236-5.269-0.586-5.269-0.586 s-1.31-2.898-2.183-4.83c-0.082-0.173-0.254-0.294-0.456-0.294s-0.375,0.122-0.453,0.294C10.671,6.26,9.362,9.158,9.362,9.158z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      }
    }
    
    @container article (inline-size > 500px) {
      article {
        grid-template-columns: 1fr 2fr;
      }
    }
    
    @container article (inline-size > 800px) {
      article {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
      }
    }
    

    Check out the full demo here that combines all of the examples used in this article:

    Additional resources

    Previous Post Deploying Node.js applications with PM2 on Vultr

    Read More