How to implement Grid layout in css
This article mainly introduces how to achieve the grid layout of css, the article introduces in great detail, has a certain reference value, interested friends must read it!
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 above is all the content of the article "how to achieve grid layout in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
