Some interesting features in the layout of the new era

In the latest Chrome Canary, an interesting CSS syntax Container Queries is supported.

Chrome Canary : Daily build version dedicated to developers, standing on the forefront of network technology. Of course, not necessarily stable~

In recent Chrome versions, some interesting properties have been supported one after another. This article will introduce some interesting new features that we can gradually use in today’s new era layout. Through this article, you will Can understand:

• gap attribute in flex layout
• Control the container aspect ratio property aspect-ratio
• CSS Grid waterfall flow layout under firefox (grid-template-rows: masonry)
• CSS container queries (Container Queries)

gap attributes in flex layout

gap is not a new attribute, it has always existed in the multi-column layout multi-column and grid layout, where:

• column-gap attribute is used to set the interval between the element columns in the multi-column
• gap attribute in the grid layout is used to set the gap between the grid rows and columns. This attribute is row-gap and column-gap , and was originally called grid-gap

For example, we have the following grid layout:

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

.grid-container {
    display: grid;
    border: 5px solid;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
.item {
    width: 100px;
    height: 100px;
    background: deeppink;
    border: 2px solid #333;
}

The effect is as follows:

By adding gap grid-container , you can set the gap between grid rows and columns very conveniently:

.grid-container {
    display: grid;
    border: 5px solid;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
+   gap: 5px;
}

And starting from Chromium 84 , we can start using gap attributes flex Can i use - gap property for Flexbox

Its function is similar to that in grid layout, and it can control the spacing between flex items in the horizontal and vertical directions:

.flex-container {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    border: 2px solid #333;
}

.item {
    width: 80px;
    height: 100px;
    background: deeppink;
}

gap attribute is that it avoids the traditional use of margin when you need to consider the left or right margin of the first or last element. Normally, if there are 4 levels of flex item , they should have only 3 gaps. gap only valid between two flex item .

Control the container aspect ratio property aspect-ratio

Maintaining a consistent aspect ratio (known as the aspect ratio) of the element container is essential for responsive web design and in certain layouts. Now, with Chromium 88 and Firefox 87, we have a more direct way to control the aspect ratio of elements- aspect-ratio . Can i use - aspect-ratio

First of all, we only need to set the width or height of the element, and then through the aspect-ratio attribute, we can control the overall width and height of the element:

<div class="width"></div>
<div class="height"></div>

div {
    background: deeppink;
    aspect-ratio: 1/1;
}
.width {
    width: 100px;
}
.height {
    height: 100px;
}

You can get the following graphics:

Secondly, aspect-ratio is set, one of the height and width of the element changes, and the other will follow the change:

<div class="container">
    <div>宽高比1:1</div>
    <div>宽高比2:1</div>
    <div>宽高比3:1</div>
</div>

.container {
    display: flex;
    width: 30vw;
    padding: 20px;
    gap: 20px;
}
.container > div {
    flex-grow: 1;
    background: deeppink;
}
.container > div:nth-child(1) {
    aspect-ratio: 1/1;
}
.container > div:nth-child(2) {
    aspect-ratio: 2/1;
}
.container > div:nth-child(3) {
    aspect-ratio: 3/1;
}

When the container size changes, the width of each child element becomes wider, and the height of the element also changes with the set ratio aspect-ratio

CodePen Demo -- aspect-ratio Demo

CSS Grid waterfall flow layout under firefox (grid-template-rows: masonry)

grid-template-rows: masonry is a way to quickly create waterfall flow layout based on grid layout that Firefox started to support in Firefox 87. And firefox has been pushing this attribute into the standard.

Starting from firefox 87, enter about:config web address bar of the browser and enable layout.css.grid-template-masonry-value.enabled configure and use. Can i use - grid-template-rows: masonry

Normally, we still need to spend a certain amount of effort to realize the waterfall flow layout, even if it is based on the grid layout. Before, we used the grid layout to finely control each grid item , and we can also implement some pseudo waterfall flow layouts:

<div class="g-container">
  <div class="g-item">1</div>
  <div class="g-item">2</div>
  <div class="g-item">3</div>
  <div class="g-item">4</div>
  <div class="g-item">5</div>
  <div class="g-item">6</div>
  <div class="g-item">7</div>
  <div class="g-item">8</div>
</div>

.g-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.g-item {
    &:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    &:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    &:nth-child(3) {
        grid-column: 3;
        grid-row: 1 / 5;
    }
    &:nth-child(4) {
        grid-column: 4;
        grid-row: 1 / 6;
    }
    &:nth-child(5) {
        grid-column: 1;
        grid-row: 3 / 9;
    }
    &:nth-child(6) {
        grid-column: 2;
        grid-row: 4 / 9;
    }
    &:nth-child(7) {
        grid-column: 3;
        grid-row: 5 / 9;
    }
    &:nth-child(8) {
        grid-column: 4;
        grid-row: 6 / 9;
    }
}

The effect is as follows:

CodePen Demo - CSS Grid implements pseudo waterfall flow layout

In the above Demo, use grid-template-columns , grid-template-rows divide the ranks, and use grid-row control grid item , but the cost of doing so is too high, and the amount of calculation is very large when there are more elements, and we still know in advance Under the premise of the height and width of each element.

With grid-template-rows: masonry , everything will become much simpler. For a 4-column grid layout where the height of each element is uncertain:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Normally, what you see is this:

grid-template-rows: masonry to the container to indicate that the waterfall flow layout is adopted in the vertical direction:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: masonry;
}

You can easily get such a waterfall flow layout:

If you are using firefox and the layout.css.grid-template-masonry-value.enabled configuration is turned on, you can poke in the demo below to get a feel:

CodePen Demo - grid-template-rows: masonry implements waterfall flow layout

Of course, this is the simplest DEMO. For more information about grid-template-rows: masonry , you can read this article in detail: Native CSS Masonry Layout In CSS Grid

CSS container queries (Container Queries)

What is CSS container query (Container Queries)?

Before, for the same style, if we wanted to get different effects based on the viewport size, we usually used the media query .

However, the design of some containers or components may not always be related to the size of the viewport, but to the placement of the components in the layout.

So in the future, a new way is added to control the container styles in different states, that is, container query. In the latest Chrome Canary , we can enable the Container Queries function chrome://flags/#enable-container-queries

Suppose we have the following structure:

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

The style under normal conditions is as follows:

.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;

    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    
    p {
        height: 100px;
        font-size: 16px;
    }
}

The structure is as follows:

In the future, we can use the @container query grammar to set .wrap under different widths. Based on the above code, add the following code:

.wrap {
    contain: layout inline-size;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;
    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    p {
        height: 100px;
        font-size: 16px;
    }
}
// 当 .wrap 宽度小于等于 400px 时下述代码生效 
@container (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .g-container .child {
        width: 100%;
    }
}

Note that to open @container query , need to meet the container contain property, there is provided contain: layout inline-size , when .wrap width less 400px time, @container (max-width: 400px) code within the force, from the horizontal layout flex-wrap: nowrap been converted to wrap the longitudinal layout flex-wrap: wrap :

If your browser has opened chrome://flags/#enable-container-queries , you can poke this code to get a feel:

CodePen Demo -- CSS @container query Demo

The similarities and differences between media query and container query, through a simple picture, the core point is that the width of the 16080dfb24cff7 container changes, the width of the viewport does not necessarily change :

This is just @container query . For more information, you can here to learn more: 16080dfb24d028 say-hello-to-css-container-queries

At last

Okay, this concludes this article, I hope it helps you :)

Want to get the most interesting CSS information, don’t miss my iCSS official account - iCSS front-end interesting

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.