Multi-columns
Multi-columns of CSS3 was the first to use pure CSS method to solve waterfall flow layout. At first, it was only used to realize multi-column text arrangement (similar to the text arrangement of newspapers and magazines). However, for the front end students, they are very creative and innovative. Some people try to achieve waterfall flow layout by combining column-count and column-gap properties related to multi-columns with break-inside.
<template>
<div class="masonry">
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
<div class="item">
<div class="item__content">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return{}},methods: {}};</script>
<style scoped>
.masonry {
-moz-column-count:5; /* Firefox */
-webkit-column-count:5;
column-count: 5;
column-gap: 5;
background-color: blue;
}
.item {
break-inside: avoid;
box-sizing: border-box;
padding: 10px;
background-color:red;
border: 1px solid # 000;
height: 300px;
width: 300px;
}
</style>
Copy the codeThe column-count command and column-gap command will be selected. The column-count command will be used to set the number of columns, and column-gap command will be used to set the column spacing. The above controls the effect from column to column, but that’s not the most important thing. The most important thing in pure CSS implementations of waterfall flow layouts was the spacing between stacks, not the control between columns (and, to be honest, control between columns, such as float, works fine). Find the realization of pain, that’s easy. You might ask if there is a CSS solution to this. There is a break-inside property in CSS, which is the most critical property for implementing waterfall flow layout
In order to control the text block to break up into separate columns, so that the contents of the item list do not cross columns and destroy the overall layout. Of course, in order for the layout to be responsive, you can use the media query property to set different columns under different conditions, such as column-count
.masonry {
column-count: 1; // one column on mobile
}
@media (min-width: 400px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
@media (min-width: 1200px) {
.masonry {
column-count: 3; // three columns on... you get it}}Copy the codeFlexbox
The Flexbox layout is widely used today and is a mature feature structure as shown in the Multi-Columns section. The CSS for the. Navigation container will be different:
.masonry {
display: flex;
flex-flow: column wrap;
width: 100%;
height: 800px;
}
Copy the codeIn the previous section, column-count is used to control the column. In this section, flex-flow is used to control the column and newline is allowed. You can set the height of the.navigation container to the same height as the browser window. For example, you can set the height of the.navigation container to 100Vh. Remember that height can be set to any height value (in any unit), but it cannot be set explicitly, because without it the container cannot wrap the list of items.
One of the trickiest aspects of this solution is the explicit setting of height for.navigation, which would be particularly unfriendly for responsive design. This is especially painful when our list of items is dynamically generated and the content is hard to control. So is there a friendlier solution?
The changed HTML structure looks like this
<template>
<div class="masonry">
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
<div class="column">
<div class="item">
<div class="item__content">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {}};</script>
<style scoped>
.masonry {
display: flex;
flex-direction: row;
flex-flow: wrap;
}
.column{
display: flex;
flex-direction: column;
width: calc(100%/5);
}
.item {
break-inside: avoid;
box-sizing: border-box;
padding: 10px;
background-color: red;
border: 1px solid # 000;
height: 300px;
width: 300px;
}
</style>
Copy the codeAs you can see, div. Column is wrapped around div. Item and is called a separate container for the list item. In this solution, the.navigation and.column will be set to flex containers using the display:flex attribute. The.navigation attribute will be set to row, and the.navigation column will be set to flex-direction.
Move to pure CSS for waterfall flow layout