Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.