Open in app

Sign in

Write

Sign in

Layout techniques you may not be familiar with

w3cplus
25 min readJan 23, 2024

Preface, if you want to master Web layout technology more systematically, please read “ Modern Web Layout “!

With the continuous innovation of web technology, CSS has become more powerful in recent years . In web development, CSS is an indispensable part. For many web developers, there are many CSS properties that they do not know, or they know, but forget to use the most suitable CSS properties at the most appropriate time. And today, some CSS properties can save developers more time. For example, in web layout , modern CSS features can help us achieve faster, such as equal height layout, horizontal and vertical centering, classic Holy Grail layout, width-to-height ratio, footer keeping at the bottom, etc. In this article, I will introduce some different CSS properties to achieve these effects, hoping that you will be interested. I hope it will be helpful for your future work.

Horizontal and vertical centering

How to achieve horizontal and vertical centering It can be said that it is a classic interview question in CSS interview questions. Many colleagues were confused by this interview question many years ago, but with the arrival of Flexbxo layout module and CSS Grid layout module , it can be said that achieving horizontal and vertical centering is very easy.

Implement horizontal and vertical centering in Flexbox

In the Flexbox layout module, whether it is a single line or multiple lines, it is easy to center them horizontally and vertically in the container, and there are many ways to do it. The most common is to set the alignment on the Flex container and set margin: auto on the Flex project.

Let’s first look at setting the alignment on the Flex container.

Set alignment on Flex containers and Flex projects

From the article “ Alignment in Flexbox Layout “, we can know that when setting the values of justify-content and align-items to center on the Flex container, elements can achieve horizontal and vertical centering effects in the Flex container. Let's take a look at an example:

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>
/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

The effect is as follows:

This method is particularly suitable for making the icon horizontally and vertically centered in the container. The difference is that the display setting on the icon container is display: inline-flex . For example, the following example:

<!-- HTML -->
<div class="flex__container">
    <svg> </svg>
</div>
/* CSS */
.flex__container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

The effect is as follows:

In this mode, if you want to make multiple elements achieve the effect of horizontal and vertical centering, you also need to add flex-direction: column , for example:

<!-- HTML -->
<div class="flex__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>
/* CSS */
.flex__container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

The effect is as follows:

In the Flexbox layout, you can also achieve horizontal and vertical centering of Flex projects in the Flex container like this:

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>
/* CSS */
.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}
.flex__item {
    align-self: center;
}

The effect is as follows:

If there are multiple Flex projects in the Flex container, this method is also effective.

.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}
.flex__container > * {
    align-self: center;
}

For example, the following effect:

In addition, you can use place-content: center to center your Flex project horizontally and vertically:

.flex__container {
    display: flex;
    place-content: center;
}
.flex__item {
    align-self: center;
}

The effect is as follows:

Or change:

.flex__container {
    display: flex;
    place-content: center;
    place-items: center;
}

These two methods are also applicable to scenarios where there are multiple Flex projects in the Flex container.

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
}
.flex__container > * {
    align-self: center;
}
// 或
.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
}

The effect is as follows:

Many colleagues may feel unfamiliar with place-content and place-items . In fact, place-content is the abbreviation property of align-content and justify-content ; while place-items is the abbreviation property of align-items and justify-items . That is:

.flex__container {
    place-content: center;
    place-items: center;
}

Equivalent to:

.flex__container {
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

Although it extends to four attributes, it is ultimately equivalent to:

.flex__container {
    display: flex;
    align-items: center;
    justify-content: center;
}
// 多行
.flex__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Set margin: auto

If there is only one Flex project in the Flex container, you can also explicitly set the value of margin to auto in the Flex project, which can also make the Flex project horizontally and vertically centered in the Flex container. For example:

.flex__container {
    display: flex; // 或 inline-flex
}

.flex__item {
    margin: auto;
}

The effect is as follows:

You can experience the whole process with the following example. Try selecting margin values in different directions:

Implement horizontal and vertical centering in Grid

CSS Grid layout can be said to be the silver bullet in modern web layout. It is also the only two-dimensional layout system in the layout system so far.

In CSS Grid layout, just a few lines of code can quickly help us achieve the effect of horizontal and vertical centering. For example, in the following example:

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>
/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}

The effect is as follows:

In the CSS Grid layout module, as long as display: grid (or inline-grid ) is explicitly set, the Grid container and Grid project will be created, and the grid lines, namely rows and columns (default is one row and one column), will be automatically generated.

Without explicitly setting grid-template-columns and grid-template-rows on the Grid container, the browser sets the Grid container to the Grid content size by default:

This method also applies to CSS Grid containers with multiple child elements (Grid projects), such as:

<!-- HTML -->
<div class="grid__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

The effect you see at this time is as follows:

And palace-items applies to every cell. This means it will center the contents of the cell. For example, the following example:

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <h3>Special title treatment</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <div class="action">Go somewhere</div>
    </div>
</div>
/* CSS */
.grid__container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
}
.grid__item {
    display: grid;
    place-items: center;
}

The effect is as follows:

For more detailed information on this, please read:

Constant height layout

Equal height layout is also a very common layout method in the Web, and there are many solutions to achieve equal height layout. Here we mainly look at the changes brought by the Flexbox layout module and the Grid layout module.

In the Flexbox and Grid layout modules, it is already very simple for us to achieve equal height layout, for example:

<!-- Flexbox -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>
/* CSS */
.flex__container {
    display: flex; // 或 inline-flex
}

Simply put, if the value of display is explicitly set to flex or inline-flex on the container, the height of all child elements of the container is equal because the default value of the container's align-items is stretch .

The effect you see at this time is as follows:

This method is particularly suitable for card components.

Similar to in the Grid layout module:

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>
/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/
}

If the requirements are adjusted, for example, in a Flex project or Grid project , the child element height is the same as the container height.

<!-- HTML -->
<flex__container>
    <flex__item>
        <content></content>
    </flex__item>
</flex__container>
/* CSS */
.flex__container {
    display: flex;
}
.content {
    height: 100%
}
// 或
.grid__container {
    display: grid;
    grid-auto-flow: column;
}
.content {
    height: 100%;
}

The effect is as follows:

For more detailed information on this, please read:

Sticky Footer

First, use the following picture to describe what is the Sticky Footer layout effect:

Sticky Footer implementation and height, vertical centering the same, there are many kinds of solutions can be achieved .

For example, a structure like the following:

<!-- HTML -->
<header></header>
<main></main>
<footer></footer>

Let’s first take a look at the implementation plan in the Flexbox layout module.

body {
    display: flex;
    flex-direction: column;
}
footer {
    margin-top: auto;
}

You can try dragging down in the lower right corner of the main area to change the height of the main content area. You will find that "when the content is less than one screen, <footer> will be at the bottom of the page. When the content exceeds one screen, <footer> will automatically be postponed".

In the Flexbox layout, you can also set the following style on the <main> area to achieve the same effect:

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

The effect is as follows:

<main> in the flex: 1 0 auto is equivalent to:

main {
    flex-grow: 1; /*容器有剩余空间时，main区域会扩展*/
    flex-shrink: 0; /*容器有不足空间时，main区域不会收缩*/
    flex-basis: auto; /*main区域高度的基准值为main内容自动高度*/
}

For more details on this, read Illustrated CSS: Flexbox Layout (Part 2). If you want to save trouble, you can explicitly set flex-grow: 1 on main , because the default values for flex-shrink and flex-basis are 1 and auto .

In CSS Grid layout, we can use 1fr to make the <main> area calculate according to the remaining space of the Grid container.

.grid__container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

The effect is as follows:

For more detailed information on this, please read:

Equalizing series

In web layout, columns are often evenly distributed, and the most common one is the bottom bar on the mobile side, such as the effect shown in the following figure.

Before Flexbox and Grid appeared, if you wanted to achieve a real evenly distributed effect, you could divide 100% (or 100vw ) by a specific number of columns. For example:

<!-- HTML -->
<container>
    <column></column>
    <column></column>
    <column></column>
</container>
/* CCSS */
.container {
    inline-size: 50vw;
    min-inline-size: 320px;
    display: flex-row;
}
.column {
    float: left;
    width: calc(100% / 3);
}

The effect is as follows:

Through the browser debugger, it can be found that the widths of each column are now equal.

In Flexbox and Grid layouts, achieving the above effect will become much easier. Let’s first take a look at the layout in Flexbox.

<!-- HTML -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>
/* CSS */
.flex__container {
    inline-size: 50vw;
    display: flex;
}
.flex__item {
    flex: 1;
}

The effect is as follows:

In the Flexbox layout module, when the value of flex is a single value (unitless number), such as flex: 1 in the example, it will be treated as explicitly setting flex-grow: 1 . The browser calculates the flex :

Next, let’s see how to achieve the effect of the above example in Grid

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>
/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*这里的3表示具体的列数*/
}

This layout method also applies to other layouts. However, there are certain defects in both Flexbox and Grid layouts. When the container does not have enough space to accommodate the Flex project (or Grid project), the Flex project or Grid project will overflow (or hide, if the Flex container or Grid container explicitly sets overflow: hidden ):

The easiest way to fix this is to explicitly set a min-width (or min-inline-size ) in the Flex container or Grid container:

.flex__container {
    min-inline-size: 300px;
}

However, speaking of which, for example, if our Flex project (or Grid project) is a card with equal width for each card, we hope that when the container does not have enough space, the Flex project (or Grid project) will automatically break and arrange.

We will continue to show you through examples. Let’s first take a look at the Flexbox implementation plan.

.flex__container {
    display: flex;
    flex-wrap: wrap;
}
.flex__item {
    flex: 0 1 calc((100vw - 18vh) / 4); /* calc(100vw -18vh) / 4 是flex-basis的基准值 */
}

You can try adjusting the window width of the browser. As the window of the browser becomes smaller and smaller, the width of the Flex container will also become smaller and smaller. When the Flex container is too small to accommodate four Flex projects (in this case), the Flex projects will be arranged in broken lines.

Based on this example, if the flex value of the Flex project is changed to:

.flex__item {
    flex: 0 0 400px;
}

At this time, when the Flex container does not have enough space, the Flex project will calculate its width according to flex-basis: 400px . When the Flex container does not have enough space, Flex will break the line:

Conversely, if the value of the Flex item flex is changed to:

.flex__item {
    flex: 1 0 400px;
}

When the Flex container does not have enough space to arrange the Flex project, the Flex project will calculate its width according to flex-basis: 400px . Flex will break the line, and when there is remaining space in the same line, the Flex project will expand and fill the entire Flex container:

Implementing similar effects in Grid is a bit more complicated. You can use features like repeat() function, 1fr and auto-fit :

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2vh;
}

The effect is as follows:

If you are interested in this knowledge, you can also read the article “Container Query Solutions with CSS Grid and Flexbox”.

In fact, there is another value compared with auto-fit in Grid called auto-fill . But the difference between the two is very large. Use the following figure to describe the difference between auto-fit and auto-fill :

In addition, this method is also a way to achieve responsive layout effect without using CSS media queries so far. Specific can click here to read .

For more detailed information on this, please read:

When using Flexbox or Grid to implement evenly distributed column layout, it is necessary to consider the impact of the minimum content size. If you are interested in this aspect, please read “ Minimum Content Size in Flexbox and Grid “. Of course, if you want to thoroughly understand the underlying principles, you need to have a certain understanding of the calculation of flex and fr . If you don't know how they are calculated, I suggest you spend some time reading the following tutorials:

Holy Grail layout

Holy Grail Layout is a typical layout pattern in the web. It looks like the following picture:

For the Holy Grail layout, there are certain requirements for HTML structure, which is to prioritize content.

<!-- HTML -->
<header></header>
<main>
    <article></article> <!-- 主内容 -->
    <nav></nav>
    <aside></aside>
</main>
<footer></footer>

Here we mainly discuss with everyone how to use the Flexbox and Grid layout modules to implement the Holy Grail layout. Let’s first take a look at the Flexbox implementation plan.

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
}
footer {
    margin-top: auto;
}
nav {
    width: 220px;
    order: -1;
}
article {
    flex: 1;
}
aside {
    width: 220px;
}

The effect is as follows:

By explicitly setting the value of order on nav , aside and article , you can control the layout order of these three areas very well. For example, if you want <aside> to be arranged before <article> , you only need to make a little adjustment based on the above example:

nav {
    order: 0;
}
aside {
    order: -1;
}

The effect is as follows:

Note that the default value of order is 0 , the larger the value, the later it is!

Based on the above example, with the help of the characteristics of CSS media objects, it is easy to achieve responsive Holy Grail layout effects.

@media screen and (max-width: 800px) {
    main {
        flex-direction: column;
    }
    nav, aside {
        width: 100%;
    }
}

Try dragging the browser to change the window size, and you can see the effect as shown below:

In the Grid layout module, implementing the Holy Grail layout is easier and more flexible than in the Flexbox layout module. In the CSS Grid layout module, the HTML structure can be more concise.

<!-- HTML -->
<body>
    <header></header>
    <main></main>
    <nav></nav>
    <aside></aside>
    <footer></footer>
</body>

There are many ways to achieve the Holy Grail layout effect in CSS. Let’s first look at the first one:

body {
    display: grid;
    grid-template: auto 1fr auto / 220px 1fr 220px;
}
header {
    grid-column: 1 / 4;
}
main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
nav {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
aside {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
footer {
    grid-column: 1 / 4;
}

The above example uses gridlines to locate each area.

Similar to Flexbox layout, the position of each grid area can be changed in media queries.

@media screen and (max-width: 800px) {
    body {
        grid-template-rows: auto;
        grid-template-columns: auto;
    }
    header,
    main,
    nav,
    aside,
    footer {
        grid-column: 1 / 2;
        min-height: auto;
    }
    main {
        grid-row: 3 / 4;
        margin: 0;
    }
    nav {
        grid-row: 2 / 3;
    }
    aside {
        grid-row: 4 / 5;
    }
    footer {
        grid-row: 5 / 6;
    }
}

In addition to grid-template (i.e. grid-template-columns and grid-template-rows ), you can also use the combination of grid-area and grid-template-areas properties in Grid layout to easily implement CSS Holy Grail layout. Based on the above example, just adjust your CSS to:

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
}
header {
    grid-area: header;
}
main {
    grid-area: main;
}
nav {
    grid-area: nav;
}
aside {
    grid-area: aside;
}
footer {
    grid-area: footer;
}
@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

You may have noticed the differences between them.

In the latter example, the <nav> , <main> and <aside> areas are equal in width. This is because in our example, we declare the grid through grid-template-areas . When using grid-template-areas to create a grid, we also implicitly create gridlines. The difference between him and grid-template is that grid-template can explicitly specify the grid track size, while grid-template-areas in this example is equivalent to the grid track size of 1fr .

If we want the <main> area to be larger, we can make an adjustment to the grid-template-areas :

body {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "nav main main main aside"
        "footer footer footer footer footer";
}

At this time, the division of the grid area is like the following figure:

Although the effect has been adjusted, it is still evenly distributed. A better solution is to combine grid-template-areas and grid-template :

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto 1fr auto;
}
header {
    grid-area: header;
}
main {
    grid-area: main;
}
nav {
    grid-area: nav;
}
aside {
    grid-area: aside;
}
footer {
    grid-area: footer;
}
@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    main {
        margin-left: 0;
        margin-right: 0;
    }
}

You can notice that at this time, the naming of the grid line area is like the following picture:

For more detailed information on this, please read:

12-Column grid layout

The 12-column grid layout was first proposed by the 960.gs grid layout system:

12-Column grid layout is often used in design systems and CSS frameworks. For example, the classic Bootstrap in the industry uses a 12-column grid layout system.

There are also many online tools in the community to help us quickly build a 12-column grid system, such as the tools listed in the article Free CSS Grid Tools & Resources For Developers .

However, the main purpose here is to show everyone how to implement a 12-column grid layout system in the Flexbox and Grid layout modules.

First, let’s take a look at the Flexbox layout module. The HTML structure of the 12-column grid layout is generally similar to the following:

<!-- HTML -->
<flex__grid>
    <flex__row>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
    </flex__row>
</flex__grid>

Note that in a 12-column grid, the sum of column values in the same row is generally exactly equal to 12 . For example, in the HTML structure above, there are three columns in a row, and the width of each column is exactly four grid widths plus two column spacings. And there is a mature calculation formula when calculating:

Moreover, there may be differences in design, such as whether there is spacing between the two sides of the container.

These differences have slight differences in the design of calculation formulas and style codes. Let’s take one of them as an example.

:root {
    --gutter: 10px;
    --columns: 12;
    --span: 1;
}
.flex__container {
    display: flex;
    flex-direction: column;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.flex__row {
    display: flex;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}
.flex__row + .flex__row {
    margin-top: 2vh;
}
.flex__item {
    flex: 1 1
        calc((100% / var(--columns) - var(--gutter)) * var(--span));
    margin: 0 var(--gutter);
}
.flex__item1 {
    --span: 1;
}
.flex__item2 {
    --span: 2;
}
.flex__item3 {
    --span: 3;
}
.flex__item4 {
    --span: 4;
}
.flex__item5 {
    --span: 5;
}
.flex__item6 {
    --span: 6;
}
.flex__item7 {
    --span: 7;
}
.flex__item8 {
    --span: 8;
}
.flex__item9 {
    --span: 9;
}
.flex__item10 {
    --span: 10;
}
.flex__item11 {
    --span: 11;
}
.flex__item12 {
    --span: 12;
}

The effect you will see is as follows:

In this example, the CSS custom properties related features are used to make the whole calculation easier.

Using the CSS Grid layout module to implement a 12-column grid layout is relatively easier, whether it is HTML structure or CSS code. When using the CSS Grid layout module to implement a 12-column grid layout, features such as repeat() , minmax() , gap and fr will be used. Let's take a look at an example.

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
</grid__container>

Let’s take a look at the CSS code.

  • Use fr to divide the grid into equal values, that is, each column width is 1 of fr ; with the repeat() function, that is, repeat(12,1fr) creates a 12-column grid
  • Using gap can be used to control the spacing between grids
  • With minmax() , you can also set the minimum value of the grid

The specific code is as follows:

:root {
    --columns: 12;
    --gap: 10px;
    --span: 1;
}
.grid__container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap);
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
}
.grid__item {
    min-block-size: 10vh;
    grid-column: span var(--span);
}
.col1 {
    --span: 1;
}
.col2 {
    --span: 2;
}
.col3 {
    --span: 3;
}
.col4 {
    --span: 4;
}
.col5 {
    --span: 5;
}
.col6 {
    --span: 6;
}
.col7 {
    --span: 7;
}
.col8 {
    --span: 8;
}
.col9 {
    --span: 9;
}
.col10 {
    --span: 10;
}
.col11 {
    --span: 11;
}
.col12 {
    --span: 12;
}

The effect you will see is as follows:

For this example, grid-template-columns: repeat(12, 1fr) creates a grid as follows:

In addition to the rough way mentioned above, it can also be more flexible to create auto-fit , minmax() and grid-auto-flow: dense , etc.

.grid__container {
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 1em;
    grid-auto-flow: dense;
}

For .grid__item you can control the position of grid items through grid-column and grid-row :

Adding grid-auto-flow: dense will automatically flow to the appropriate location based on the Grid container space.

For more detailed information on this, please read:

Align both ends

The need for alignment is often encountered in web layouts. In Flexbox layouts, the value of justify-content is often explicitly set in the Flex container:

.flex__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

However, at the end of the line, if the number is different from the previous line (Flex project), the following effect will appear:

The effect like the one in the above picture is not what we need, because we want the Flex items to be arranged one after another when the last row of Flex items is not enough to fill the entire row.

To achieve the effect shown in the above picture in Flexbox, simply add a pseudo-element to the Flex container.

.flex__container::after {
    content: "";
    display: flex;
    flex: 0 1 32vw;
}

Note that the flex-basis of a pseudo-element is recommended to be the same as the flex-basis (or width) of the card. At this point you will see an example like this:

However, this method is not the best way. When the number of rows at the end is not less than one, the following effect will appear:

Faced with such a scenario, we need to add additional empty tag elements to the Flex container: the number of placeholder elements = the maximum number of columns per row — 2.

But after the gap attribute appears, it is not difficult to achieve such an effect:

body {
    padding: 1vh;
}
.flex__container {
    display: flex;
    flex-wrap: wrap;
    gap: 2vh;
    width: 100%;
}
.flex__item {
    flex: 0 1 calc((100vw - 8vh) / 4);
}

The effect is as follows:

In a CSS Grid layout, you can use gap directly:

body {
    padding: 1vh;
}
.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1vh;
}

The effect is as follows:

Choose the best value

Many times, designers will provide us with different design styles for different scenarios, such as element sizes.

With the arrival of the clam() function, this all becomes much easier.

The clam() function takes three parameters, namely clam(MIN, VAL, MAX) , where MIN represents the minimum value, VAL represents the preferred value, and MAX represents the maximum value. Between them:

  • If VAL is between MIN and MAX , use VAL as the return value of the function;
  • If VAL is greater than MAX , use MAX as the return value of the function;
  • If VAL is less than MIN , use MIN as the return value of the function

Let’s look at an example:

.element {
    /**
    * MIN = 100px
    * VAL = 50vw ➜ 根据视窗的宽度计算
    * MAX = 500px
    **/ 
    width: clamp(100px, 50vw, 500px);
}

For example, if the current position of the browser window is 1200px width, then the .element rendering result is as follows:

At this time , the width of the .element element is 500px . At this time, clamp(100px, 50vw, 500px) is equivalent to clamp(100px, 600px, 500px) , the corresponding VAL value is 600px , greater than MAX value, then the value returned by clamp() function is MAX , that is 500px , at this time the width value of .element is 500px (that is, the value of MAX ).

If we shrink the browser window to 760px :

At this time , the width of the .element element is 50vw . At this time, clamp(100px, 50vw, 500px) is equivalent to clamp(100px, 380px, 500px) , corresponding to the VAL value is 380px , which is greater than the MIN value ( 100px ) and less than the MAX value ( 500px ), then the value returned by the clamp() function is VAL , that is, 50vw . At this time , the width value of .element is 50vw (that is, the value of VAL ).

If you continue to shrink the browser window to 170px :

At this time , the width of the .element element is 100px . At this time, clamp(100px, 50vw, 500px) is equivalent to clamp(100px, 85px, 500px) , the corresponding VAL value is 85px , which is less than the MIN value ( 100px ), then the value returned by the clamp() function is MIN , that is 100px , at this time the width value of .element is 100px (that is, the value of MIN ).

For this example, clamp(100px, 50vw, 500px) can also be understood as follows:

  • Element . The width of element will not be less than 100px (somewhat similar to setting min-width: 100px for elements)
  • Element . The width of the element will not be greater than 500px (somewhat similar to the element setting max-width: 500px )
  • The preferred value VAL is 50vw , which is only effective when the width of the window is greater than 200px and less than 1000px , that is, the width of element.element is 50vw (somewhat similar to the element setting width: 50vw )

The specific effects are as follows:

For a more detailed introduction on this aspect, it is recommended that you move to read:

Alignment of Logo Icons

I think you may have encountered a scenario similar to the one in the following picture in web development.

As shown in the above picture, logo images come in different sizes (with different widths and heights). Faced with such business scenarios, it is often hoped that designers can provide images of the same size. However, this will inevitably affect the appearance of the logo image.

In fact, to achieve such a layout effect, the main use is the CSS object-fit property, and this property has been supported by major mainstream browsers many years ago.

Here we use a simple example to see the specific implementation process. Let’s first take a look at the HTML structure.

<!-- HTML -->
<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- ... --> </li>
</ul>

Center alignment has been introduced earlier. Here, we mainly focus on the processing of image size.

.brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}
.brands__item {
    background: #eee;
}
.brands__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

This can achieve the effect shown in the above picture. You may have noticed that some logo images have background colors. To improve the effect, you can apply CSS Blend Mode-related features.

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

At this moment, the effect you see is as follows:

Object-fit in addition to the value contain , there are several other values, you can see the following example:

Actually, this plan also applies to product images, character avatars, and other layouts.

If you want to learn more about image processing techniques on the web, it is recommended that you take some time to read the following related tutorials:

Summary

The article mainly introduces the implementation ideas and specific plans of some layouts in the Web. In fact, the effects mentioned in the article, such as horizontal and vertical centering , equal height layout , evenly distributed columns and Sticky Footer , have always had various solutions in CSS, but with the arrival of the CSS Flexbox layout module and the CSS Grid layout module, the implementation of these effects has become more flexible and concise.

Of course, the article only mentions some of the most common effects. In fact, there are many interesting things in web layout, especially in Flexbox layout and Grid layout, but they were not listed one by one due to the length of the article. If you are interested, you can dig out more. If you have better experience or solutions in this area, please share them in the comments below. Finally, I hope this article will be helpful to your daily work.

CSS
Web
Web Development
Layout

--

--

w3cplus

Written by w3cplus

336 Followers

Author of "Modern CSS," "Modern Web Layout," "In-Depth CSS Defense," and "A Journey into Web Animation!"

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams