Shulou(Shulou.com)06/03 Report--

This article is to share with you about the characteristics of the layout of the new era in web development, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

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

Chrome Canary [1]: a daily build for developers, standing at the forefront of network technology. Of course, it may not be stable.

In recent versions of Chrome, some interesting attributes have been supported.

Gap property in flex layout

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

The column-gap property is used to set the interval between element columns in a multi-column layout multi-column.

The gap property in the grid layout is used to set the gap between grid rows and columns, which is short for row-gap and column-gap, and was originally called grid-gap

For example, we have the following grid layout:

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

The effect is as follows:

Grid layout

By adding the gap attribute to grid-container, you can easily set the gap between grid rows and columns:

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

Starting with Chromium 84, we can start using the gap attribute in flex layouts! Can i use-- gap property for Flexbox [2]

Can i use-gap property for Flexbox

It works similar to that in grid layouts, controlling the spacing between flex item horizontally and vertically:

.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;}

The advantage of the gap attribute is that it avoids the traditional annoyance of considering the left or right margin of the first or last element when using margin. Normally, with 4 levels of flex item, they should have only 3 gaps. Gap only works between two flex item.

Control container aspect ratio property aspect-ratio

Maintaining a consistent aspect ratio (called aspect ratio) of element containers is critical to 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 [3]

Can i use-aspect-ratio

First of all, we just 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 {background: deeppink; aspect-ratio: 1amp 1;} .width {width: 100px;} .height {height: 100px;}

You can get the following graphics:

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

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

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

CodePen Demo-aspect-ratio Demo [4]

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

Grid-template-rows: masonry is a way to quickly create waterfall flow layouts based on grid layouts supported by firefox in firefox 87. And firefox has been pushing this attribute into the standard.

Starting with firefox 87, enter about:config in the browser input URL bar and turn on layout.css.grid-template-masonry-value.enabled configuration use. Can i use-- grid-template-rows: masonry [5]

Normally, it takes some effort to implement the waterfall flow layout, even based on the grid layout. Previously, we can also implement some pseudo waterfall layout through grid layout and fine control of each grid item:

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:

Implementation of pseudo-waterfall flow layout with CSS Grid

CodePen Demo-CSS Grid implementation of pseudo-waterfall flow layout [6]

In the above Demo, we use grid-template-columns and grid-template-rows to split the rows and rows, and use grid-row to control the size of the grid occupied by each grid item, but the cost is too high, there are many elements, and the amount of computation is also very large, and on the premise that we know the height and width of each element in advance.

With grid-template-rows: masonry, everything becomes much easier, for a 4-column grid layout that is uncertain about the height of each element:

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

Normally, what you see is like this:

Simply add grid-template-rows: masonry to the container to indicate the vertical direction and adopt the waterfall flow layout:

.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 have layout.css.grid-template-masonry-value.enabled configuration enabled, you can tap the following DEMO to feel it:

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

Of course, this is the simplest DEMO. For more information about grid-template-rows: masonry, you can take a detailed look at this article: Native CSS Masonry Layout In CSS Grid [8]

CSS container query (Container Queries)

What is a CSS container query [9] (Container Queries)?

Previously, for the same style, we usually used media queries if we wanted different effects depending on the size of the viewport.

However, the design of some containers or components may not always be related to the size of the viewports, but to where the components are placed in the layout.

So in the future, there is a new way to control the container style in different states, that is, container query. In the latest Chrome Canary [10], we can turn on the Container Queries function through chrome://flags/#enable-container-queries.

Suppose we have the following structure:

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!

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:

In the future, we can use @ container query syntax to set the different performance of parent container .wrap under different widths, and add the following code to the above 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 }} / / when the width of .wrap is less than or equal to 400px, the following code takes effect @ container (max-width: 400px) {.g-container {flex-wrap: wrap; flex-direction: column;} .g-container .child {width: 100%;}}

Note that to enable @ container query, you need to match the container's contain attribute. Here, contain: layout inline-size is set. When the .wrap width is less than or equal to 400px, the code in @ container (max-width: 400px) takes effect, transforming from horizontal layout flex-wrap: nowrap to vertical line wrap layout flex-wrap: wrap:

If your browser already has chrome://flags/#enable-container-queries open, you can poke this code and feel it:

CodePen Demo-- CSS @ container query Demo [11]

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

This is just the tip of the @ container query iceberg. You can poke more here to learn more: say-hello-to-css-container-queries [12]

These are the characteristics of the new era layout in web development, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.