Some interesting features of the new age layout

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

Chrome Canary: a daily build for developers that stands on the cutting edge of web technology. Of course, not necessarily stable ~

There are some interesting features that have been supported in recent Chrome releases, and this article looks at some of the interesting new features that we can gradually use in today’s new-age layout. In this article, you’ll learn about:

In flex layoutgapattribute
Controls the container aspect ratio propertyaspect-ratio
Grid-template-rows: navigation in Firefox
CSS Container Queries

In flex layout`gap`attribute

Gap is not a new property, it has always existed in multi-column and grid layouts, where:

column-gapProperty to set a multi-column layoutmulti-columnThe size of the interval between the columns of elements in
The grid layoutgapProperty is used to set the gap between grid rows and columnsrow-gap 和 column-gapShort for, and originally calledgrid-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>
Copy the code

.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;
}
Copy the code

The effect is as follows:

You can easily set the gap between grid rows and columns by adding the gap attribute to grid-Container:

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

As of Chromium 84, we can start using gap properties in Flex layouts! Can i use — gap property for Flexbox

It works just as in grid layout, controlling the spacing between Flex items in 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;
}
Copy the code

The advantage of the gap attribute is that it avoids the traditional worry of having to consider the left or right margin of the first or last element when using margins. Normally, four horizontal Flex items should have only three gaps. Gap only applies between two Flex items.

Controls the container aspect ratio property`aspect-ratio`

Maintaining a consistent aspect ratio (called aspect ratio) for element containers is critical for responsive Web design and in some 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, we only need to set the width or height of the element, and then control the overall width and height of the element through the aspect-ratio property:

<div class="width"></div>
<div class="height"></div>
Copy the code

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

The following figure can be obtained:

Secondly, the aspect-ratio elements are set. When one element’s height and width changes, the other element will follow:

<div class="container">
    <div>Aspect ratio 1:1</div>
    <div>Aspect ratio of 2:1</div>
    <div>Aspect ratio 3:1</div>
</div>
Copy the code

.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;
}
Copy the code

As the container size changes, the width of each child element increases, and the height of the element changes with the specified aspect-ratio ratio:

CodePen Demo — aspect-ratio Demo

Grid-template-rows: navigation in Firefox

Grid-template-rows: navigation is a way to quickly create waterfall layouts based on grid layouts that Firefox has supported since Firefox 87. And Firefox has been pushing this property into the standard.

Starting from Firefox 87, enter about:config and enable layout. CSS. Grid-template-pipeline-value. enabled. Can i use — grid-template-rows: masonry

Normally, it takes some effort to implement a waterfall flow layout, even with a Grid layout. Previously, we can also achieve some pseudo-waterfall flow layouts through grid layout by fine-tuning each grid item:

<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>
Copy the code


.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; }}Copy the code

The effect is as follows:

CodePen Demo – CSS Grid implementation of pseudo-waterfall flow layout

In the above Demo, grid-template-columns and grid-template-rows are used to separate columns and columns, and grid-row is used to control the size of each grid item. However, the cost of doing this is too high. It’s a lot of computation, and that’s assuming we know the height and width of each element in advance.

Grid-template-rows: navigation would be a whole lot easier. For a grid layout with four columns, the height of each element is uncertain:

.container {
  display: grid;
  grid-template-columns: repeat(4.1fr);
}
Copy the code

Normally, you would see something like this:

Grid-template-rows: navigation, for example, would be the next navigation. For example, grid-template-rows: navigation, for example, would be the next navigation.

.container {
  display: grid;
  grid-template-columns: repeat(4.1fr);
+ grid-template-rows: masonry;
}
Copy the code

You can easily get a waterfall flow layout like this:

If you are using Firefox and have layout.css. Grid-template-cropage-value. enabled enabled, you can check out the following DEMO:

CodePen Demo — grid-template-Rows: navigation implements waterfall flow layout

Native CSS navigation Layout In CSS grid. For details, see the following article: Native CSS navigation Layout In CSS grid

CSS Container Queries

What is the CSS Container Queries?

Previously, we used media queries if we wanted to get different results for the same style depending on the viewport size.

However, the design of some containers or components may not always depend on the size of the viewport, but rather on where the components are placed in the layout.

So in the future, there will be a new way to control container styles in different states: container queries. In the latest Chrome Canary, you can enable the Container queries feature with 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>
Copy the code

The normal pattern 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; }}Copy the code

The structure is as follows:

In the future, we can use the @container Query syntax to specify how the parent.wrap behaves in different widths.

.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; / / when}}.wrapWidth less than or equal to400pxWhen the following code takes effect@container (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .g-container .child {
        width: 100%; }}Copy the code

Container Query: contain @container Query: contain @container Query: contain Wrap width < or equal to 400px, the code in @container (max-width: 400px) will apply. Nowrap transforms into vertical newline layout flex-wrap: wrap:

If your browser already has Chrome ://flags/#enable-container-queries enabled, you can use this code to get a feel for it:

CodePen Demo — CSS @container query Demo

A simple graph shows the difference between media query and container query. The core point is that the viewport width does not necessarily change when the container width changes:

This is just the tip of the iceberg for @container Query. You can check out say-hello-to-CSs-container-queries here

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, don’t miss my iCSS official account – *iCSS front-end interesting news

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

Some interesting features of the new age layout

In flex layoutgapattribute

Controls the container aspect ratio propertyaspect-ratio

Grid-template-rows: navigation in Firefox

CSS Container Queries

The last

Related Posts

Consolidate these 13 handwritten codes

5 minutes with you quickly read vite | source reading packaging process

Micro front end detail

In flex layout`gap`attribute

Controls the container aspect ratio property`aspect-ratio`