The author | wei-hua liao (large tapir)

Edit | orange

New retail product | alibaba tao technology

As Web technologies continue to evolve, CSS has become more powerful in recent years. CSS is an integral part of Web development, and for many Web developers there are many PROPERTIES of CSS that they don’t know, or that they know, but forget to use the most appropriate CSS properties at the most appropriate time. And today, there are some CSS properties that can save developers even more time. For example, in Web layouts, modern CSS features such as contour layouts, horizontal and vertical centers, classic Holy Grail layouts, width to height ratios, keeping footers at the bottom, etc. In this article, I’ll introduce a few different CSS properties to achieve these effects, and I hope you’ll find them interesting. I hope it will be helpful to your future work.

Horizontal and vertical center

How to achieve horizontal and vertical center can be said to be the classic CSS interview questions in the interview questions, many years ago this interview questions to many students have brought confusion, but the arrival of the Flexbxo layout module and CSS Grid layout module, can be said to achieve horizontal and vertical center is very easy.

Flexbox implements horizontal and vertical center

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

Let’s start with setting alignment on the Flex container.

Set alignment on the Flex container and Flex project

As you probably know, setting the values of justify-content and align-items to center on the Flex container allows elements to be centered horizontally and vertically in the Flex container. Here’s an example:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

This method is particularly suitable for centering the Icon Icon horizontally and vertically in the container. The difference is that the display setting display: inline-flex is displayed on the Icon Icon container. For example, here’s an example:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

In this mode, if you want multiple elements to be centered horizontally or vertically, you 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; }Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

In the Flexbox layout, you can also make Flex projects horizontally and vertically centered in the Flex container like this:

<! -- HTML --> <div class="flex__container"> <div class="flex__item"></div> </div> /* CSS */ .flex__container { display: flex; // or inline-flex insert-content: center; } .flex__item { align-self: center; }Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

This method also works if there are multiple Flex projects in the Flex container:

.flex__container { display: flex; // or inline-flex insert-content: center; } .flex__container > * { align-self: center; }Copy the code

Like this:

Demo (codepen. IO/airen/embed…).

Alternatively, you can use place-content: Center to center Flex projects horizontally and vertically:

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

.flex__item {
    align-self: center;
}

Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Or, to put it:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Both approaches also work if you have multiple Flex projects in your Flex container:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Many students may be unfamiliar with place-content and place-items. In fact, place-content is shorthand for both align-content and autocrate-content; Place-items, on the other hand, is shorthand for the align-items and insert-items properties. That is:

.flex__container {
    place-content: center;
    place-items: center;
}
Copy the code

Equivalent to:

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

    align-items: center;
    justify-items: center;
}
Copy the code

Although the extension has four attributes, it is ultimately equivalent to:

.flex__container { display: flex; align-items: center; justify-content: center; } // Multi-line.flex__container {display: flex; flex-direction: column; align-items: center; justify-content: center; }Copy the code

Set Margin: Auto on the Flex project

If there is only one Flex project in the Flex container, you can also explicitly set margin to auto in the Flex project, which also centers the Flex project horizontally and vertically in the Flex container. Such as:

.flex__container { display: flex; // or inline-flex}. Flex__item {margin: auto; }Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

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

The Demo (codepen. IO/airen/embed…

Implement horizontal and vertical center in the Grid

The CSS Grid layout is the silver bullet of modern Web layout. It is also the only two-dimensional layout system in the layout system so far.

In a CSS Grid layout, it takes only a few lines of code to quickly achieve horizontal and vertical centering. For example, here’s an example:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

In the CSS Grid layout module, whenever display: Grid (or inline-Grid) is explicitly set, the Grid container and Grid project are created. Grid lines are also automatically generated, namely rows and columns (the default is row by column).

If you do not explicitly set grid-template-columns and grid-template-rows on the Grid container, the browser will default the Grid container to the Grid content size:

This method also applies to CSS Grid containers that have multiple child elements (Grid project), 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>Copy the code

Here’s what you’ll see:

Demo (codepen. IO/airen/embed…).

And the cache-items apply to each cell. This means that it will center the contents of the cell. For example, here’s an 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; }Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Such as the layout

The contour layout is also a very common layout in the Web, and there are many ways to achieve the contour layout. Here we will focus on the Flexbox layout module and Grid layout module to bring us what changes.

In the Flexbox and Grid layout modules, it is already very easy to implement a contour layout, such as:

<! -- Flexbox --> <flex__container> <flex__item></flex__item> <flex__item></flex__item> <flex__item></flex__item> </flex__container> /* CSS */ .flex__container { display: flex; / / or inline - flex}Copy the code

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

Here’s what you’ll see:

Demo (codepen. IO/airen/embed…).

This is particularly useful for card components:

Demo (codepen. IO/airen/embed…).

In the Grid layout module similar:

<! -- 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; /* Adjust the value according to the demand */}Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Also used in some card layouts:

Demo (codepen. IO/airen/embed…).

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%} // or.grid__container {display: grid; grid-auto-flow: column; } .content { height: 100%; }Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Based on the Sticky Footer

First, use the following image to describe what a Sticky Footer layout is:

The Sticky Footer implementation is the same as the contour and vertical center, there are also many implementations (//css-tricks.com/couple-takes-sticky-footer/).

Something like this:

<! -- HTML --> <header></header> <main></main> <footer></footer>Copy the code

Let’s take a look at the Flexbox layout module implementation:

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

footer {
    margin-top: auto;
}
Copy the code

Demo (codepen. IO/airen/embed…).

Try changing the height of the main content area by dragging down in the lower right corner of the main area, and you’ll find that “When content is less than one screen long,

In the Flexbox layout, you can also

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

main {
    flex: 1 0 auto;
}
Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

main { flex-grow: 1; /* The main field is expanded when the container has free space */ flex-shrink: 0; /* The main area does not shrink when the container has insufficient space */ flex-basis: auto; /* The main area height is set to the main content automatic height */}Copy the code

If you want to make it easier, 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

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Are respectively

In Web layouts, columns are often evenly distributed. The most common layout is the bottom Bar on the mobile terminal, such as the following effect:

Before Flexbox and Grid, if you wanted to really even out the columns, you could divide 100% (or 100VW) by the number of columns. Such as:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

As you can see from the browser debugger, all columns are of the same width:

With Flexbox and Grid layouts, this becomes much easier to implement. Let’s start with the Flexbox layout:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

In the Flexbox layout module, when flex takes a single (unitary) value, such as flex:1 in the example, it is treated as an explicit flex-grow: 1 setting. Flex calculated by the browser:

Let’s look at how to implement the above example in the 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); /* the number of columns */}Copy the code

The end result is the same:

The Demo (codepen. IO/airen/embed…

This can be applied to other layouts as well. However, in both Flexbox and Grid layouts, there is a drawback. A Flex or Grid project can overflow (or be hidden, if the Flex or Grid container is explicitly set overflow:hidden) when there is not enough space in the container for it:

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

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

Then again, let’s say that our Flex project (or Grid project) is a card, each card is of equal width, and we would prefer that the Flex project (or Grid project) be automatically lined up when there is not enough space in the container.

Let’s continue to show you by example. Let’s start with the Flexbox implementation:

.flex__container { display: flex; flex-wrap: wrap; } .flex__item { flex: 0 1 calc((100vw - 18vh) / 4); /* calc(100vW-18vh) / 4 is the base value of flex-basis */}Copy the code

Demo (codepen. IO/airen/embed…).

You can try to adjust the width of the browser window. As the browser window gets smaller and smaller, the Flex container gets smaller and smaller. When the Flex container is too small to hold four Flex items (for this example), the Flex items will be arranged in broken lines:

Based on this example, if you change the Flex value of the Flex project to:

.flex__item {
    flex: 0 0 400px;
}
Copy the code

At this point, when the Flex container does not have enough space, the Flex project will calculate its width at flex-basis: 400px. When the Flex container does not have enough space, Flex will break lines:

Conversely, if the Flex project’s value Flex is changed to:

.flex__item {
    flex: 1 0 400px;
}
Copy the code

When the Flex container does not have enough space to arrange Flex projects, the Flex project is calculated to its width at flex-basis: 400px, Flex breaks lines, and when there is space left on the same line, the Flex project expands to fill the entire Flex container:

Achieving a similar effect in the Grid is a little more complicated. You can use the repeat() function, 1fr, and auto-fit features:

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

Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

If you’re interested in this kind of knowledge, You can also read Container Query Solutions with CSS Grid and Flexbox (/ / moderncss. Dev/container – query – solutions – with CSS – the grid – and – Flexbox /) “.

There is actually another value in the Grid that compares to auto-fit called auto-fill. However, the difference between auto-fit and auto-fill is very large. The following figure describes the difference between auto-fit and auto-fill:

In addition, this way is so far a way to achieve a responsive layout effect without the use of CSS media queries.

The holy grail layout

The Grail Layout (Holy Grail Layout) (/ / en.wikipedia.org/wiki/Holygrail (web_design)) is a typical Web Layout mode (/ / alistapart.com/article/holygrail/). It looks like this:

For the cup layout, there are certain HTML structure requirements, which are content first:

<! -- HTML --> <header></header> <main> <article></article> <! - the main content - > < nav > < nav > < value > < value > < / main > < footer > < footer >Copy the code

Here is mainly to discuss how to use Flexbox and Grid layout module to achieve the Holy Grail layout. Let’s start with the Flexbox implementation:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

By explicitly setting the order value on nav, aside, and article, you can control the order in which these three areas are laid out. For example, hope

nav {
    order: 0;
}

aside {
    order: -1;
}
Copy the code

The effect is as follows:

Note that the default value of order is 0, and the larger the value, the higher the rank! !

Based on the above example, it is easy to achieve a responsive Holy Grail layout with the features of CSS media objects:

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Try dragging the browser to resize the window and you will see something like this:

Implementing the Holy Grail layout is easier and more flexible in the Grid layout module than it is 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>Copy the code

There are many ways to achieve the Holy Grail layout in CSS. Let’s 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;
}
Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

The above example uses grid lines to locate each area:

Similar to the Flexbox layout, you can change the location of each grid area in a media query:

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

Demo (codepen. IO/airen/embed…).

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 attributes in grid layout. Also can very convenient implementation CSS holy Grail layout. Based on the example above, 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"; }}Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

You might notice a difference between them:

In this later example,

If we want to

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

At this point, the grid area is divided as follows:

Although the effect has been adjusted, but still evenly divided state. A better solution is to use a combination of 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; }}Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

You can see that at this point, the area of the grid line is named like this:

12 column grid layout

The 12-column grid layout is the first grid layout system proposed by 960.gs (//960.gs/) :

The 12-column grid layout is often used in design systems and CSS frameworks, such as the classic Bootstrap(// getBootstrap.com/) :

There are also many online tools in the community that help us quickly build a 12-column grid system, Such as Free CSS Grid Tools & Resources For Developers (/ / 1 stwebdesigner.com/free-css-grid-tools-resources/) the article list of Tools.

Demo (paulhebertdesigns.com/gridley/)

But here I want to take a look at how to implement a 12 column Grid layout system in Flexbox and Grid layout module.

Let’s start with the Flexbox layout module. The HTMl structure for a 12-column grid layout would generally look like this:

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

Note that in a 12-column grid, the values of the columns in the same row will generally add up to exactly 12. For example, in the HTML structure above, there are three columns in a row, each of which is just four grid widths plus two column spacing. In addition, there is a mature formula for calculation:

In addition, there will be some differences in design, such as whether there is a distance between the two sides of the container and so on:

These differences are slightly different for both the calculation formula and the design of the style code. Let’s use 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;
}
Copy the code

Here’s what you’ll see:

Demo (codepen. IO/airen/embed…).

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

Using the CSS Grid layout module to implement a 12-column Grid layout, it is relatively easy to implement both the HTML structure and the CSS code. The repeat(), minmax(), gap, and FR features will be used to implement a 12-column Grid layout using the CSS Grid layout module. Let’s look at an example.

<! -- HTML --> <grid__container> <grid__item></grid__item> </grid__container>Copy the code

Let’s look at the CSS code:

Use fr to divide the mesh into equal values, i.e. each column width is 1 FR; Together with the repeat() function, repeat(12, 1fr), a 12-column grid is created
Gap can be used to control the spacing between grids
With minmax(), you can also set the grid minimum

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

Here’s what you’ll see:

Demo (codepen. IO/airen/embed…).

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

In addition to this rough approach, we can be a little more flexible with auto-fit, minmax(), and grid-auto-flow: dense: dense:

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

For.grid__item, we can control the position of grid items with grid-column and grid-row:

Demo (codepen. IO/airen/embed…).

Add grid-auto-flow: dense will automatically flow grid projects to the right place according to the grid container space:

This layout is ideal for magazine layouts. For more details on this, read @Keir Watson’s Responsive Grid Magazine Layout in Just 20 Lines of CSS(//css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/).

full-justified

The need for alignment on both ends is often encountered in Web layouts. In the Flexbox layout, it is common to explicitly set the value of justify content in the Flex container:

.flex__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    width: 100%;
}
Copy the code

But at the end of the line, if the number of rows is not the same as the number of rows before it (Flex project), something like this will appear:

An effect like the one shown above is not what we want because we want the Flex projects to be lined up next to each other when there are not enough Flex projects on the last line to fill the line:

To achieve the effect shown above on Flexbox, all you need to do is add a pseudo-element to the Flex container:

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

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

Demo (codepen. IO/airen/embed…).

However, this is not the best way to do it. When the number of rows at the end is more than one, it will look like this:

For this scenario, we need to add an extra empty tag element to the Flex container:

Number of placeholder elements = maximum number of columns per row – 2

But with the gap attribute, it’s not hard to achieve this effect:

body {
    padding: 1vh;
}

.flex__container {
    display: flex;
    flex-wrap: wrap;
    gap: 2vh;

    width: 100%;
}

.flex__item {
    flex: 0 1 calc((100vw - 8vh) / 4);
}
Copy the code

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Note that Gap is only supported by Firefox so far in Flexbox. In the above example, using the Firefox browser, you see something like this:

In CSS Grid layout, we can use gap directly:

body {
    padding: 1vh;
}

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

The effect is as follows:

Demo (codepen. IO/airen/embed…).

Choose the best value

A lot of times, designers will give us different design styles for different scenarios, such as element size:

With the clam() function, all this has become much easier.

The clam() function accepts three parameters, clam(MIN, VAL and MAX), where MIN represents the minimum value, VAL the preferred value and MAX 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, then MIN is used 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); }Copy the code

For example, if the browser window is now 1200px wide, then.Element renders as follows:

The width of the element is 500px. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 600px, 500px) with a value of 600px greater than MAX, so clamp() returns MAX with a value of 500px. The element’s width is 500px.

If we narrow the browser window to 760px:

The width of the element is 50vw. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 380px, 500px) with VAL value 380px greater than MIN value (100px) and less than MAX value (500px). Clamp () returns VAL (50vw) and element width (50vw).

If you continue to zoom out your browser window to 170px:

The width of the element is 100px. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 85px, 500px) with a VAL value of 85px less than MIN (100px), then clamp() returns MIN, which is 100px. The element’s width is 100px.

Clamp (100px, 50vw, 500px) can also be interpreted as follows for this example:

Min-width: 100px min-width: 100px min-width: 100px
< span style = “box-sizing: border-box; color: RGB (255, 255, 255); line-height: 22px;
The preferred value of VAL is 50vw, which is only valid if the window width is greater than 200px and less than 1000px, i.e. the element. The element has a width of 50vw (similar to the width of the element: 50vw).

Codepen. IO /airen/embed…

Align the Logo icon

I think you’ve probably come across a scenario like this in Web development:

As you can see above, Logo images come in large and small sizes (with different widths and heights). Faced with a business scenario like this, it is often desirable for designers to provide the same size image. However, this will inevitably affect the appearance of the Logo image.

Some time ago to see @ Ahmad Shadeed wrote a blog post “Aligning Logo Images in the CSS (/ / ishadeed.com/article/aligning-logos-css/), is introduced how to realize the above such layout effect.

The main way to achieve this effect is to use the CSS object-fit property, which has been supported by major browsers for years.

Here’s a simple example to see how this works. Let’s start with the HTML structure:

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

Center alignment has been introduced before, here is mainly to look at the image size aspect of processing:

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

Copy the code

This will achieve the effect shown above. You may have noticed that some of the Logo images have a background color. To make it look better, you can use some features related to CSS blend mode:

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

Copy the code

At this point, you will see the following effect:

Contain other folders (codepen. IO /airen/embed…

In fact, this scheme can also be applied to product pictures, people’s heads and other layout.

summary

This paper mainly introduces the realization ideas and specific schemes of some layouts in Web. In fact, the effects mentioned in this article, such as horizontal and vertical center, contour layout, average layout and Sticky Footer, have always been multiple solutions in CSS, but with the CSS Flexbox layout module and CSS Grid layout module, to achieve these effects has become more flexible and simple.

Of course, this article is just a few of the most common effects, but there are a lot of interesting things in Web layouts, especially Flexbox and Grid layouts, that I just didn’t have enough time to list. If you’re interested, you can dig up some more, and if you have a better experience or plan, please share it in the comments below. Finally, I hope this article will be helpful to your daily work.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

What are the web layouts? What are the common layouts?

Horizontal and vertical center

Flexbox implements horizontal and vertical center

Implement horizontal and vertical center in the Grid

Such as the layout

Based on the Sticky Footer

Are respectively

The holy grail layout

12 column grid layout

full-justified

Choose the best value

Align the Logo icon

summary

What are the web layouts? What are the common layouts?

Horizontal and vertical center

Flexbox implements horizontal and vertical center

Implement horizontal and vertical center in the Grid

Such as the layout

Based on the Sticky Footer

Are respectively

The holy grail layout

12 column grid layout

full-justified

Choose the best value

Align the Logo icon

summary

Related Posts

React principle: Reconcile (Diff) algorithm

How to develop your own Yeoman scaffolding

How to make a simple browser user extension