The main course

Recently, barbeque received a request to achieve something like this:

This is for the barbecue gentleman this mixed barbecue market for many years of young people, three five divided by two can be baked out, never waves deserve the reputation!

However, there is only one dish, and the means of baking can have a variety of, the so-called technology more than pressure body! Let’s see how many ways this can be done.

Demand analysis

A schematic diagram describes the requirements

This is a specific case of grid layout!

The width of the parent container is adaptive, and the width of the child container is calculated by (100% – (n-1) * 24)/n. If the width of the page is larger than 1280px, n is equal to 5. If the width of the page is less than 1280px, n is equal to 4. The minimum width of the page is 960px.

According to this calculation formula, we can get the following treatment.

The Grid layout

There is nothing more professional than a Grid layout to implement this requirement. Grid layout is also known as Grid layout.

“CSS Grid Layout Tutorial”

//html <div class="parent"> <div class="children"> <div class="children-content"></div> </div> ... < div style = "box-sizing: border-box; color: RGB (74, 74, 74); grid-template-columns: repeat(5, 1fr); grid-row-gap: 24px; grid-column-gap: 24px; } @media screen and (max-width: 1280px) { .parent { grid-template-columns: repeat(4, 1fr); } // child container. Children {}Copy the code

The advantage of the Grid layout is that it uses a short style code to achieve a great UI layout. Compared to the traditional layout, the Grid layout is just as efficient as the Flex layout.

But its disadvantage is that the compatibility of IE browser is not very good, only part of the property compatibility, if you want to fully adapt, it must be the next wave of effort!

Liquid layout

A lot of students think of using margin to stretch the distance when they use floating layout. This idea is implemented with CSS

// Parent container. Parent {width: 100%; } // Clear float. Parent ::after {content: "; display: block; height: 0; clear: both; } // child container. Children {float: left; width: **px; height: **px; margin: **px **px; }Copy the code

The distance between the sub-containers is 24px. This distance does not change with the size of the page. Some students took an easy way to do this, and converted 24px into a percentage.

// Subcontainer 18.4 * 5 + 4 * 2 = 100; .children { float: left; Width: 18.4%; height: **px; margin-left: 2%; }Copy the code

100% of the design needs to be restored without question!

How to use floating layout to achieve perfect implementation?

From the formula (100% – (n-1) * 24)/n for calculating the width of the subcontainer, change the following:

childrenWidth = (100% - (n - 1) * 24) / n 
			  = (100% + 24 - n * 24) / n
			  = (100% + 24) / n - 24
Copy the code

From the result (100% – 24)/n – 24, we get this solution. The width of the child container needs to be 24px apart, and the width of the parent container needs to be increased by 24px. This means that the child container width can be expressed as a percentage, but with 24px extra width.

As shown in the figure:

Code implementation:

Parent {width: calc(100% + 24px); parent {width: calc(100% + 24px); } .parent::after { content: ''; display: block; height: 0; clear: both; } .children { float: left; width: 20%; margin-bottom: 24px; padding-right: 24px; } @media screen and (max-width: 1280px) { .children { width: 25% ! important; } } .children-content { width: 100%; } //or .parent { width: calc(100% + 24px); margin-left: -24px; } .parent::after { content: ''; display: block; height: 0; clear: both; } .children { float: left; width: calc(25% - 24px); height: 40px; margin-bottom: 24px; margin-left: 24px; background-color: aquamarine; } @media screen and (max-width: 1280px) { .children { width: calc(25% - 24px) ! important; }}Copy the code

The disadvantage of this approach is that it adds n top-level nodes to the child container, which may affect the layout of the child container. Use this approach with caution. Of course, the biggest advantage of this approach is browser compatibility is very good, more eat compatibility attribute calc although in can I use display is not fully adapted to IE, but the above code is very ok!

Flex layout

If you don’t know flex layout, check out this flex layout tutorial: Syntax

Direct implementation:

.parent {
    width: calc(100% + 24px);
    margin-left: -24px;
    display: flex;
    flex-wrap: wrap;
}

.children {
    flex-basis: calc(20% - 24px);
    height: 40px;
    margin-bottom: 24px;
    margin-left: 24px;
    background-color: aquamarine;
}

@media screen and (max-width: 1280px) {
    .children {
        width: calc(25% - 24px) !important;
    }
}

Copy the code

As you can see, this implementation is pretty much the same as the floating layout, so you can be sure that these two layouts are not very professional for this requirement! Compatibility also depends on calC and Flex compatibility.

However, for those of you who are interested in using Flex layouts, flex can also fulfill this grid layout requirement.

conclusion

There are other ways to implement the requirement besides the above centralized layout, which is welcome to discuss in the comments section, but if compatibility is not an issue, the grid layout should be the first thing that comes to mind when you see this requirement.

Pay attention to the “front barbecue stall” gold or wechat public account, the first time to get the barbecue gentleman’s front road summary and discovery.