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

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!

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.