Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles

After going around in circles, I finally found that the easiest way to achieve a justified layout is to use CSS columns.

For example, if we want to align the elements of three columns at both ends with a 30px gap in the middle, the CSS code is:

.container {
    columns: 3 30px;
}

Ding Dong, it's over, game over~

It's ridiculously simple.

Don't doubt it, take a look at an example of real-time rendering:

<div class="container">
    <div class="zhang"></div>
    <div class="xin"></div>
    <div class="xu"></div>
</div>

.container {
    columns: 3 30px;
}
.container > div {
    padding: 50px;
    background: deepskyblue;
}

The real-time rendering effect is as follows

2. Advantages and disadvantages of columns implementation

advantage

Compared with the alignment effect of space-between values ​​in Flex and Grid layouts, the biggest advantage of using CSS columns layout is that it protects the original display calculation value of HTML elements, in addition to requiring less code.

For example, by default in the browser, <li> elements will have bullet points, such as dots, or numerical sequences.

If you use Flex layout or Grid layout, you need to set display:flex or display:grid . If you change the original display:list-item calculated value, the dots or numerical numbers will disappear.

For this advantage, I made a demo, you can click here: demo of retaining list-style-type and aligning columns at both ends

It can be seen that <li> element child elements maintain the alignment effect, and the default dot symbol of the <li> element itself is also retained, as shown in the following figure.

This is something that Flex Layout and Grid Layout cannot easily achieve.

shortcoming

It is suitable for the alignment effect of single-line elements. If the list elements have many rows, the columns layout is not easy to handle. First, the flow of the list is prioritized in the vertical direction. Second, it is easy to have unexpected scenarios where the list is divided vertically.

3. Conclusion

Although it is not practical to use CSS columns to achieve the layout effect at both ends in actual development, it still has many limitations.

The only suitable scenario is when the layout effect at both ends is achieved without changing the display value. Although such scenarios are relatively rare, there are so many actual development projects and thousands of usage scenarios that it is hard to guarantee when you will encounter them. At this time, using just a few letters such as columns:3 30px can achieve an exquisite layout effect. Isn't it great!

In fact, technology is like this. There are very few APIs that are useless and completely useless. Their existence has a reason and their appearance is valuable, but their usage scenarios are to deal with atypical scenarios.

Learn it, understand it, and you may not see the results in a short period of time, but as project experience accumulates, you will definitely encounter suitable usage scenarios. Others will still have a headache about how to achieve it and continue to search on Google, but you can achieve such a need in a flash of time and write a few lines of code. That feeling will make you addicted. What is it like? It is the feeling of being the controller of the technology world, overlooking the numerous codes, and being second to none in the code world. In essence, it is a feeling of controlling power and being a technical expert.

Therefore, although CSS columns have a good chance of being used to implement layout at both ends, their own value is not low.

Well, this article is not very technically difficult, it is mainly to share some layout tips.

This article address: https://www.zhangxinxu.com/wordpress/?p=9429

This is the end of this article about how to achieve the justified layout effect with CSS columns. For more information about justified layout with CSS columns, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!