What are the methods to realize grid layout
This article mainly explains "what are the methods to realize the grid layout". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the ways to achieve grid layout?"
First, use float:
The code is as follows:
Section
{
Border: solid 1px
}
Section section
{
Float: left
Margin-left: 10px
Margin-top: 10px
Text-align: center
Width: 200px
Border-radius: 20px
Height: 200px
}
.parent
{
Height: 440px
Width: 660px
}
.parent section:first-child
{
Height: 410px
}
A
B
C
D
E
Second, use display:flex (this css3 attribute is only supported by Google and Firefox)
The code is as follows:
Section
{
Border: solid 1px
}
Section section
{
Margin-left: 10px
Margin-top: 10px
Text-align: center
Width: 200px
Border-radius: 20px
Height: 200px
}
.parent
{
Display: flex
Flex-direction: column
Flex-wrap: wrap
Height: 440px
Width: 660px
}
.parent section:first-child
{
Height: 410px
}
A
B
C
D
E
The implementation effect is shown in the figure:
At this point, I believe you have a deeper understanding of "what are the methods to achieve grid layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
