As Web technology continues to evolve, CSS has become more powerful in recent years than it was years ago. CSS is an integral part of Web development, and there are a lot of CSS properties that Web developers don’t know about, or they do know about, but forget to use the most appropriate CSS properties at the right time. And today, there are some CSS properties that can save developers even more time. For example, in Web layouts, modern CSS features are much better for fast implementation, such as contour layout, horizontal and vertical center, classic Holy Grail layout, width to height ratio, footer at the bottom, etc. In this article, I’ll look at some of the different CSS properties used to achieve these effects, which I hope you’ll find interesting. I hope it will be helpful to our future work.

Horizontal and vertical center

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

Flexbox achieves horizontal and vertical centering

In Flexbox layout modules, it is easy to center either single or multiple rows horizontally and vertically in a container, and there are many ways to do so. The most common is to set the alignment on the Flex container and margin: Auto on the Flex project.

Let’s start by looking at setting alignment on the Flex container.

Set alignment on Flex containers and Flex projects

You probably already know that setting context-content and align-items to center allows elements to be centered horizontally and vertically in Flex containers. 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; }Copy the code

The effect is as follows:

Demo

This approach is particularly useful for centering the Icon horizontally and vertically in the container, except that the Icon container displays the setting display: inline-flex. Take this 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

In this mode, if you want to center multiple elements horizontally and 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

In the Flexbox layout, Flex projects can also be centered horizontally and vertically 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;
}
Copy the code

The effect is as follows:

Demo

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

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

For example:

Demo

In addition, 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

Or, to put it:

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

The effect is as follows:

Demo

The same applies to situations 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; } // or.flex__container {display: flex; flex-direction: column; place-content: center; place-items: center; }Copy the code

The effect is as follows:

Demo

Place-content and place-items may be unfamiliar to many students. Place-content is a shorthand for align-content and context-content; Place-items is a shorthand attribute for align-items and context-items. 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 it extends to four attributes, it is ultimately equivalent to:

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

Set Margin: Auto on the Flex project

If you have only one Flex project in the Flex container, you can also explicitly set margin to Auto in the Flex project to center 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

You can see the whole process through the following example. Try selecting margins in different directions:

Demo

Grid to achieve horizontal and vertical center

CSS Grid layouts are arguably the silver bullet of modern Web layouts. 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 horizontal and vertical centralization. Take this 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

In the CSS Grid layout module, Grid containers and Grid projects are created whenever display: Grid (or inline-grid) is explicitly set. Grid lines, i.e. rows and columns (row by column by default), are also 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 approach also applies to CSS Grid containers with multiple child elements (Grid items), 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 should see:

Demo

And palce-items apply to each cell. This means that it will center the contents of the cell. Take this 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

Such as the layout

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

In the Flexbox and Grid layout modules, it is already very easy for us 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

To put it simply, the display value is explicitly set to flex or inline-flex on the container, and all the children of the container have the same height, because the default of the align-items of the container is stretch.

Here’s what you should see:

Demo

This is especially true for card components:

Demo

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 as required */}Copy the code

The effect is as follows:

Demo

Also used in some card layouts:

Demo

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

<! -- 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

Sticky Footer

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

The Sticky Footer implementation scheme is the same as isometric and vertical centering, and there are also many schemes that can be implemented.

For example, a structure like this:

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

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

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

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

Demo

Try dragging down in the lower right corner of the main area to change the height of the main content area. You’ll notice that ”

is at the bottom of the page when content is less than one screen, and

is automatically pushed back when content is more than one screen”.

In the Flexbox layout, you can also set the following styles on the


area to achieve the same effect:

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

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

The effect is as follows:

Demo

Flex: 1 0 auto in

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

If you want to save yourself some trouble, you can explicitly set Flex-grow :1 on main, since the default values for flex-shrink and flex-basis are 1 and auto.

In a CSS Grid layout we can use 1FR to make the


area do calculations based on the remaining space of the Grid container.

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

The effect is as follows:

Demo

Are respectively

In Web layouts, columns are often evenly distributed. The most common layout is at the bottom of the mobile Bar, as shown in the following image:

Before Flexbox and The Grid, if you wanted to really split up, you could divide 100% (or 100vw) by a specific 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

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

With Flexbox and Grid layouts, this is much easier to achieve. Let’s start with 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; }Copy the code

The effect is as follows:

Demo

In the Flexbox layout module, when flex takes a single value (ununitless number), such as flex:1 in the example, it is treated as explicitly setting Flex-Grow :1. Browser calculated flex:

Let’s see how the above example is implemented 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:

Demo

This layout also applies to other layouts. However, there are certain defects in both Flexbox and Grid layouts that overflow (or hide, if the Flex container or Grid container explicitly sets overflow:hidden) when there is not enough room for Flex projects (or Grid projects) :

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

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

But then again, let’s say our Flex project (or Grid project) is a card, and each card is the same width. We would prefer that Flex projects (or Grid projects) automatically break lines when the container doesn’t have enough space.

We’ll 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 flex-basis */}Copy the code

Demo

You can try adjusting the browser window width. As the browser window gets smaller and smaller, the Flex container gets smaller and smaller. When the Flex container is too small to fit four Flex items (for example), the Flex items will break into rows:

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

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

When the Flex container does not have enough space, the Flex project calculates the width at flex-basis: 400px. When the Flex container does not have enough space, Flex breaks the line:

Conversely, if the Flex project 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 The Flex items, the Flex project will calculate its width at Flex-basis: 400px, Flex will break the line, and when there is space left on the same line, Flex project will expand to fill the entire Flex container:

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

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

The effect is as follows:

Demo

Container Query Solutions with CSS Grid and Flexbox is another great article to read if you’re interested.

In fact, there is another value in the Grid that is compared to auto-fit called auto-fill. However, the difference between the two is very large. The following figure is used to describe the difference between Auto-fit and auto-fill:

This is also the only way so far to achieve a responsive layout without resorting to CSS media queries.

The holy grail layout

Holy Grail Layout is a typical Layout pattern on the Web. It looks like this:

For the holy grail layout, the HTML structure has certain requirements, that is, content first:

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

Here we will discuss how to use the Flexbox and Grid layout modules 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

By explicitly setting the order value on nav, aside, and article, you can control the layout order of these three areas. For example, if you want 

nav {
    order: 0;
}

aside {
    order: -1;
}
Copy the code

The effect is as follows:

Pay attention to,orderThe default value of0, the larger the value, the more the row behind!

Based on the above example, it is easy to achieve a responsive Holy grail layout effect with the help 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

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

The Holy Grail layout is easier and more flexible to implement in the Grid layout module 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>Copy the code

There are many ways to achieve the Holy Grail layout effect with 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

The above example uses grid lines to locate each area:

Similar to the Flexbox layout, the position of each grid region can be changed in the 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

In addition to grid-template (i.e. grid-template-columns and grid-template-rows), you can also use a combination of grid-area and grid-template-areas attributes in a grid layout. It is also very convenient to achieve the CSS Holy Grail layout. Based on the example above, just change 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

You might notice a difference between them:

In this later example, the

If we want the


area to be larger, we can make adjustments to grid-template-areas:

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

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

Although the effect has been adjusted, it is still evenly divided. A better solution is to combine grid-template-areas with 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

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

12 column grid layout

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

The 12-column grid layout is often used in design systems and CSS Framework. For example, the classic Bootstrap system uses the 12-column grid layout system:

There are also a number of online Tools in the community that can help you quickly build a 12-column Grid system, such as the Tools listed in Free CSS Grid Tools & Resources For Developers.

But I want to show you how to implement a 12-column Grid layout system in Flexbox and Grid layout modules.

Let’s start with the Flexbox layout module. The HTMl structure of a 12-column grid layout looks something 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 sum of the columns in the same row is usually exactly equal to **12**. For example, in the HTML structure above, there are three columns in a row, each of which is exactly four grid widths plus two column Spaces. And in the calculation of a mature calculation formula:

And there will also be differences in design, such as distance between the two sides of the container, etc. :

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

Here’s what you should see:

Demo

In this example, CSS custom property-related features are used to make the whole calculation a little easier.

Using the CSS Grid layout module to implement a 12-column Grid layout, both the HTML structure and the CSS code are relatively simple. In implementing a 12-column Grid layout using the CSS Grid layout module, features such as repeat(), Minmax (), gap, and FR will be applied. 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:

  • usefrDivide the grid into equal values, i.e., each column width is1afr; Cooperate withrepeat()Function, i.e.,repeat(12, 1fr)A 12-column grid is created
  • usegapCan be used to control the spacing between grids
  • Cooperate withminmax()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

What you should see is this:

Demo

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

In addition to the above rough approach, we can be more flexible and create auto-fit, Minmax () and Grid-Auto-flow: 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

Grid__item controls the location of grid items by grid-column and grid-row:

Demo

Grid-auto-flow: Dense will automatically flow grid projects to appropriate locations according to grid container space:

This layout is ideal for magazine layouts. For more on this, read @Keir Watson’s Responsive Grid Magazine Layout in Just 20 Lines of CSS.

full-justified

The need to align ends is often encountered in Web layouts. In Flexbox layouts, it is common to explicitly set context-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 is not the same as the previous line (Flex project), you will see something like this:

An effect like the one above is not what we want, because we want Flex items to line up next to each other when the last row does not have enough Flex items:

To achieve this effect in 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 flex-basis (or width) of the card. At this point you will see an example like the following:

Demo

However, this is not the best way, when the number of trailing rows is more than one, the result will look like the following:

For this scenario, we need to add additional empty tag elements to the Flex container:

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

With the gap attribute, however, it is not difficult 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

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

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

The effect is as follows:

Demo

Choose the best value

Most of the time, designers will give us different design styles for different scenes, such as element size:

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

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

  • ifVALinMINandMAXBetween, is usedVALAs the return value of a function;
  • ifVALIs greater thanMAX, use theMAXAs the return value of a function;
  • ifVALLess thanMIN, MIN is used as the return value of the function

Let’s look at an example:

.element {/** * MIN = 100px * VAL = 50vw ➜ Calculate based on window width * MAX = 500px **/ width: clamp(100px, 50vw, 500px); }Copy the code

For example, if the browser window is now 1200px wide, element renders the following:

At this point, the width of the element is 500px. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 600px, 500px), and the corresponding VAL value is 600px, which is greater than the MAX value. At this point, element’s width value is 500px (MAX).

If we reduce the browser window to 760px:

At this point, the width of the element element is 50vw. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 380px, 500px) and the corresponding VAL value is 380px, which is greater than MIN value (100px) and less than MAX value (500px). Clamp () returns a value of VAL (50vw), and element’s width is 50vw.

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

The width of the element is 100px. Clamp (100px, 50vw, 500px) is equivalent to clamp(100px, 85px, 500px), and the corresponding VAL value is 85px, which is less than the MIN value (100px). At this point, the width of element is 100px (MIN).

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

  • The element.elementIs not less than100pxSort of like element setupmin-width: 100px)
  • The element.elementThe width of the500pxSort of like element setupmax-width: 500px)
  • The preferred valueVALfor50vw, only if the window width is greater than200pxAnd less than1000pxThat is, the element.elementThe width is50vwSort of like element setupWidth: 50 vw)

The specific effect is shown here.

Alignment of Logo ICONS

I think you might have encountered a scenario like this in Web development:

As you can see in the image above, Logo images come in different sizes (width and height). Faced with such a business scenario, it is often desirable that the designer provide an image of the same size. But this inevitably affects the appearance of the Logo image.

A while back, @Ahmad Shadeed wrote a blog post called Aligning Logo Images in CSS that explains how to make a layout like the one above happen.

In fact, such a layout effect is mainly used in CSS object-fit property, and this property has been supported by major browsers for many years.

Let’s use a simple example to see how it 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 previously, 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 Logo images have a background color, but to make things better, you can incorporate CSS blend mode related features:

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

At this point, you should see something like this:

The object-fit value contains three other folders:

In fact, this scheme also applies to product images, people’s heads and other layouts.

summary

This article mainly introduces the realization ideas and concrete 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 available in CSS solutions, but with the advent of CSS Flexbox layout module and CSS Grid layout module, the implementation of these effects has become more flexible and concise.

Of course, these are just some of the most common effects mentioned in this article, but there are a lot of interesting things in Web layouts, especially Flexbox layouts and Grid layouts, just because there isn’t enough time to list them all. Dig up some more if you’re interested, and if you have a better experience or solution, feel free to share it in the comments below. Finally, I hope this article is helpful to your daily work.