preface
Read an article two days ago, do not look down on a question can let candidates show their true colors! , think of a few years ago to do the public number H5 development, there is a scene is to do this nine grid, so yesterday will refer to the article in some of the implementation and think of several ways of a simple column, also convenient for their future review. If you have any questions, you can leave a message, Thanks – (· ω ·) Blue.
The effect
Dom structure
There are 9 items under the parent element f. Items usually loop or write fixed elements to get 9 items. In the table layout, li was added as the parent element of item. Custom is primarily a container for business presentation content, such as ICONS, module names, navigation directories, and so on.
<div class="f1">
<-- <div class="li"> -->
<div class="item">
<div class="custom"></div>
</div>
<-- </div> -->
...
</div>
Copy the codenote-taking
For demand scenes, some need squares or some need a certain proportion, some need gaps and some do not need gaps, plus whether the length and width are fixed or the px size is divided by proportion, roughly covering these situations. There are a few minor points to note about the layout:
1. Use padding to make a square
From the description of the padding in W3CSchool, you know that the percentage is based on the width of the parent element, so you can make a square or any other proportion you want.
| value | describe |
|---|---|
| auto | The browser calculates the inside margin. |
| length | Specifies interior margin values in specific units, such as pixels, centimeters, etc. The default value is 0px. |
| % | Specifies an inside margin based on a percentage of the width of the parent element. |
| inherit | Specifies that the inner margin should be inherited from the parent element. |
2. The padding sequelae
After the padding is used, the content height of the box model is not affected, so the square element and its child element are separated from the document flow by position, and the parent element is filled with graphics. Use Flex’s context-content and align-items to center and other locations.
3. The other
Consider grid compatibility, especially for government projects.
Part of the code
//f1 :table layout parent element fixed width and height
.f1{
width:300px;
height: 300px;
display: table;
border-spacing: 3px;
.li{
display: table-row;
.item{
display: table-cell;
border: 1px solid blue;
text-align: center;
vertical-align: middle;
.custom{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.item:hover {
color: red;
border: 1px solid red;
z-index: 1; }}}// Table layout Container Adaptive
.f2{
width: 24%;
height: 24%;
display: table;
border-spacing: 3px;
.li{
display: table-row;
.item{
display: table-cell;
border: 1px solid blue;
text-align: center;
vertical-align: middle;
padding-top: calc( (100% - 6px) / 3);
position: relative;
min-width: 50px;
min-height: 50px;
.custom{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
.item:hover {
color: red;
border: 1px solid red;
z-index: 1; }}}// F3: Flex layout seamless specific width and height
.f3 {
width: 300px;
display: flex;
flex-flow: wrap;
.item {
color: blue;
width: 98px;
height: 98px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
box-sizing: border-box;
margin-top: -1px;
margin-left: -1px;
&:nth-child(3n + 1) {
margin-left: 0px;
}
&:nth-child(-n + 3) {
margin-top: 0px;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}// F4: Flex layout seamless adaptive width and height
.f4{
width: 24%;
display: flex;
flex-flow: wrap;
.item {
color: blue;
width: calc(100% / 3);
border: 1px solid;
box-sizing: border-box;
margin-top: -1px;
margin-left: -1px;
padding-top: calc(100% / 3);
position: relative;
.custom{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
&:nth-child(3n + 1) {
margin-left: 0px;
}
&:nth-child(-n + 3) {
margin-top: 0px;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}// F5: Flex layout has gap adaption
.f5{
width: 24%;
display: flex;
flex-flow: wrap;
.item {
color: blue;
width: calc((100% - 20px) / 3);
border: 1px solid;
box-sizing: border-box;
margin:5px;
padding-top: calc((100% - 20px) / 3 - 2px);/ / minus the border
position: relative;
&:nth-child(3n+2){
margin: 5px 0px;
}
.custom{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}// F6: Grid layout has fixed width gap
.f6{
display: grid;
width:300px;
grid-template-columns: repeat(3,98px);
grid-template-rows: repeat(3,98px);
grid-column-gap: 3px;
grid-row-gap: 3px;
.item{
color: blue;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}f7:grid layout fixed width seamless px.f7 {display: grid;
width:300px;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
.item{
color: blue;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
margin-top: -1px;
margin-left: -1px;
&:nth-child(3n + 1) {
margin-left: 0px;
}
&:nth-child(-n + 3) {
margin-top: 0px;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}//f8 :grid layout fixed width gap FR
.f8{
width:300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-column-gap: 3px;
grid-row-gap: 3px;
.item{
color: blue;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
margin-top: -1px;
margin-left: -1px;
&:nth-child(3n + 1) {
margin-left: 0px;
}
&:nth-child(-n + 3) {
margin-top: 0px;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}// F9: Grid layout adaptive gap
.f9{
width:24%;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-column-gap: 3px;
grid-row-gap: 3px;
.item{
color: blue;
border: 1px solid;
padding-top: calc( 100% - 2px );/ / border height 2 px
position: relative;
.custom{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
justify-content: center;
align-items: center;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}// F10: Grid layout adaptive seamless
.f10{
width:24%;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
.item{
color: blue;
border: 1px solid;
padding-top: calc( 100% - 2px );/ / border height 2 px
position: relative;
margin-top: -1px;
margin-left: -1px;
&:nth-child(3n + 1) {
margin-left: 0px;
}
&:nth-child(-n + 3) {
margin-top: 0px;
}
.custom{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
justify-content: center;
align-items: center;
}
&:hover{
color: red;
border: 1px solid red;
z-index: 1; }}}Copy the codeconclusion
For basic understanding of GIRD, you can see Zhang Xinxu’s display: Grid layout tutorial, Ruan Yifeng’s CSS Grid layout tutorial. Write relatively rough, hope to leave some impression to oneself.