“This is the eighth day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”.

Previous recommendations:

“Full Screen CSS Layout”

“CSS Layout (2) multi-column Layout”

preface

Today we are going to introduce equal layout, through three methods to achieve, Let’s go!!

Uniform layout

  • Divided layout: a layout consisting of multiple columns, each of which has a fixed and equal width and height. Therefore, there are many ways to implement it. Overall, this is a relatively simple layout.
<div class="layout"> <div class="layout-one"></div> <div class="layout-two"></div> <div class="layout-three"></div> <div  class="layout-four"></div> </div>Copy the code
.layout-one {
    background-color: crimson;
}
.layout-two {
    background-color: orange;
}
.layout-three {
    background-color: yellow;
}
.layout-four {
    background-color: green;
}
  
Copy the code

This is done by percentage /float:left

Since it is the same width height, you can calculate the percentage of each column by dividing the required number of columns by 100, and float to the left of the setting.

.layout { width: 920px; height: 880px; div { float: left; width: 25%; height: 100%; }}Copy the code

Through column-count

Again, since the height is the same width, column layout must be preferred, and the corresponding semantics are more obvious.

.layout { width: 920px; height: 880px; column-count: 4; // column-gap: 0; Div {height: 100%; }}Copy the code

Implemented with Flex

  • Of course, Flex is totally possible. After all, he can implement almost any layout with Flex. Declare the parent as display: flex, so that the height of the nodes of the container will be stretched and equal, and declare flex: 1 for each child.
.layout { display: flex; width: 920px; height: 880px; div { flex: 1; }}Copy the code

Note: Since display: flex is declared, the default property of the child is align-items: stretch, so the height of the child will be stretched to fill the parent node.

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!