Container queries are coming

csshtml

Recently I am using container queries because they feel good to use. It makes parts of the website truly responsive!

I work with a CMS where editors can drag the column width to build the page layout. But this sometimes creates a column that is less than a X amount wide where the content would not fit nicely. If you would style element purely using viewport queries, you would have to use a media query for every possible width. This is not maintainable.

So I had a simple element that was placed in the left 'column'. 6 out of 12 wide. This element had 6 items in it with icon, title and text.

I wanted to show these in 2 columns if there is enough space (width) in parent, so container queries to the rescue!

It is really simple CSS (Using SCSS) and I love it:

.icon-list {
    background-color: pink;
    container-type: inline-size;
    container-name: icon-list;

    border: 1px solid crimson;

    display: flex;
    flex-wrap: wrap;
    --gap: 3.2rem;
    gap: var(--gap);
}

.icon-item {
    flex: 0 0 auto;
    --columns: 1;
    width: calc(100% / var(--columns) - var(--gap) / var(--columns) * (var(--columns) - 1));

    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;

    .placeholder,
    img {
        display: flex;
        width: 5.5rem;
        height: 5.5rem;
        flex: 0 0 auto;
    }

    h3 {
        @extend .p1;
        font-weight: 700;
        margin-block-end: 0;
    }

    .icon-item-content {
        a {
            text-decoration: none;
            color: inherit;
            &:hover,
            &:focus,
            &:active {
                text-decoration: underline;
            }
        }
    }
}
@container icon-list (min-width: 55rem) {
    .icon-item {
        background-color: gold;
        --columns: 2;
    }
}

Liquid html

Example html written in Liquid.


<div class="icon-list">
  {% for i in icon_list.icon_items %}
    <div class="icon-item">
      {% if i.icon != blank %}
        <img src="{{ i.icon | img_url }}" alt="{{ i.icon.meta.alt }}" >
      {% else %}
        <span class="placeholder" aria-hidden></span>
      {% endif %}
      <div class="icon-item-content">
        <h3>{{ i.title }}</h3>
        {{ i.text }}
      </div>
    </div>
  {% else %}
    ...
  {% endfor %}
</div>

Codepen example

See it in action on this codepen:

See the Pen Container Query example with icon list. by Wonky (@Wonky) on CodePen.