Some interesting features in the layout of the new era

Time:2021-9-26

In the latest chrome canary, an interesting CSS syntaxContainer QueriesSupported.

Chrome Canary: daily build for developers, standing at 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 learn:

  • In flex layoutgapattribute
  • Controls the container aspect ratio attributeaspect-ratio
  • CSS grid waterfall flow layout under Firefox (grid template rows: Mason)
  • CSS container queries

In flex layoutgapattribute

gapIt is not a new property, it always exists in multi column layoutmulti-columnAnd grid layout, where:

  • column-gapProperty is used to set the multi column layoutmulti-columnThe size of the interval between prime columns
  • Grid layoutgapProperty is used to set the gap between grid rows and columns. This property isrow-gapandcolumn-gapAnd originally calledgrid-gap

For example, we have the following onegridLayout:

<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 effects are as follows:

Some interesting features in the layout of the new era

By givinggrid-containeradd togapProperty to easily set the gap between grid rows and columns:

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

Some interesting features in the layout of the new era

And fromChromium 84Start, we can start inflexUse in layoutgapAttribute!Can i use — gap property for Flexbox

Some interesting features in the layout of the new era

Its function is similar to that in grid layout. It can control 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;
}

Some interesting features in the layout of the new era

gapThe advantage of attribute is that it avoids traditional usemarginYou need to consider the trouble of the left margin or right margin of the first or last element. Normally, four levels offlex item, they should have only three gaps.gapOnly valid for twoflex itembetween.

Controls the container aspect ratio attributeaspect-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-ratioCan i use — aspect-ratio

Some interesting features in the layout of the new era

First, we just need to set the width or height of the element, and then pass itaspect-ratioProperty, that is, you 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;
}

The following figures can be obtained:

Some interesting features in the layout of the new era

Secondly, setaspect-ratioThe height and width of one element will change, and the other will follow:

<div class="container">
    < div > aspect ratio 1:1 < / div >
    < div > aspect ratio 2:1 < / div >
    < div > aspect ratio 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 increases with the settingaspect-ratioScale changes with:

Some interesting features in the layout of the new era

CodePen Demo — aspect-ratio Demo

CSS grid waterfall flow layout under Firefox (grid template rows: Mason)

grid-template-rows: masonryIt is a way for Firefox to quickly create waterfall flow layout based on grid layout, which is supported by Firefox 87. And Firefox has been pushing this attribute into the standard.

Starting with Firefox 87, enter the URL in the browserabout:configAnd openlayout.css.grid-template-masonry-value.enabledConfigure usage.Can i use — grid-template-rows: masonry

Some interesting features in the layout of the new era

Normally, it takes some effort to implement waterfall flow layout, even based on grid layout. Before, we used grid layout to control each grid through refinementgrid item, you 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 effects are as follows:

Some interesting features in the layout of the new era

Codepen demo — CSS grid to realize pseudo waterfall flow layout

In the above demo, usegrid-template-columnsgrid-template-rowsSplit rows and columns, usinggrid-rowControl eachgrid itemBut the cost is too high. There are many elements, and the amount of calculation is also very large, and we still know the height and width of each element in advance.

And here we aregrid-template-rows: masonryAfter that, everything will be much simpler. For a 4-column grid layout that does not determine the height of each element:

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

Normally, what you see is this:

Some interesting features in the layout of the new era

Simply addgrid-template-rows: masonry, indicating 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:

Some interesting features in the layout of the new era

If you’re using Firefox and it’s onlayout.css.grid-template-masonry-value.enabledFor configuration, you can poke the following demo to feel it:

Codepen demo — grid template rows: Mason implements waterfall flow layout

Of course, this is the simplest demo, about moregrid-template-rows: masonryFor relevant knowledge, you can take a detailed look at this article:Native CSS Masonry Layout In CSS Grid

CSS container queries

What is?CSS container query(Container Queries)?

Before, for the same style, if we want to get different effects according to the viewport size, we usually usedMedia 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 components in the layout.

Therefore, in the future, a new method is added to control container styles in different states, that is, container query. In the latestChrome CanaryIn, we can passchrome://flags/#enable-container-queriesTurn on the container queries function.

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 normal style 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:

Some interesting features in the layout of the new era

In the future, we can@container querySyntax, setting parent container.wrapFor different performances under different widths, the following codes are added on the basis of the above Codes:

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

Be careful to turn it on here@container query, it needs to be matched with the containercontainProperty, which is set herecontain: layout inline-size, when.wrapWidth less than or equal to400pxWhen,@container (max-width: 400px) The code in takes effect from the horizontal layoutflex-wrap: nowrapTransformed into a vertical line feed layoutflex-wrap: wrap

Some interesting features in the layout of the new era

If your browser is already turned onchrome://flags/#enable-container-queries, you can poke this code and feel it:

CodePen Demo — CSS @container query Demo

The similarities and differences between media query and container query can be seen through a simple figure. The core point isWhen the width of the container changes, the width of the viewport does not necessarily change

Some interesting features in the layout of the new era

Here is just an introduction@container queryAt the tip of the iceberg, you can poke here to learn more:say-hello-to-css-container-queries

last

Well, this article ends here. I hope it will help you:)

If you want Get to get the most interesting CSS information, don’t miss my iCSS official account.ICSS front end anecdotes

More wonderful CSS technical articles are summarized in myGithub — iCSS, continuously updated. Welcome to a star subscription collection.

If you have any questions or suggestions, you can communicate more. The original articles have limited writing style and shallow talents. If there is anything wrong in the article, please let me know.

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]