What are the common layouts of CSS

This article will explain in detail what the common layout of CSS is, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Flex realizes the layout of left, middle and right

The main thing is to use the following code in the parent element

Display: flex

Flex-direction:row

Compared with the traditional layout, is it much easier?

Flex left, center, right

Flex to achieve vertical centering

Display: flex

Justify-content:center

Align-items:center

Flex is vertically centered

You can see that the flex layout is very convenient.

If you want to know more about flex layout, you can read Ruan Da's blog. Of course, you can read MDN.

The previous introduction is all one-dimensional layout, but in terms of complex two-dimensional layout, there is no doubt that the CSS grid layout created to solve the layout is more professional.

Learning grid layout is actually a process of learning corresponding English, so being good at English really has an advantage.

Grid layout to achieve left, middle and right

Although it is a bit overqualified, we are trying to compare it with the previous layout method.

You only need to use two lines of code

Display: grid

Grid-template-columns: 30% 40% 30%

The code of the grid layout is more economical, and the child elements do not need to be set separately, but directly on the parent element.

Grid left, center, right

Of course, the child elements here should match the corresponding grid, that is, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40

Grid layout

The fr here is the unit of fraction.

Display: grid

Grid-template-columns: 1fr 1fr 1fr. / / 3 columns equally divided

Grid-template-rows: 1fr 1fr 1fr. / / 3 lines evenly divided

Through the above code, a 3x3 grid is implemented.

You can select the corresponding grid and add properties using the following code

Grid-column: 1; / / or 2 or 3

Grid-row: 1; / / or 2 or 3

This is the end of this article on "what are the common layouts of CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.