Example code for implementing card waterfall layout with css3 column

This article introduces the sample code of CSS3 column to realize the card waterfall layout, which is shared with you as follows:

Achieve results

Today I encountered the problem of implementing a waterfall layout of cards, and the heights of the cards were different.

Finally, I used the column attribute in CSS3 to implement this layout, and it was very simple (I vaguely remember that the last time I wrote the waterfall flow, I used JS to implement it... naive)

The effect is as follows:

Related properties

1. column-count: the number of columns you want to achieve, I only need 2 columns here
2. column-width: The width of the column
3. column-gap: The gap between columns
4. break-inside:avoid: If you do not set this attribute for the child elements (each card), a card will be truncated and displayed in different columns.

Problems encountered

1. I encountered a small problem during the implementation process. The bottom border of my card would be cut off.
2. Solved by setting overflow:auto on child elements

Code

       .videoCards {
            padding-top: 4rpx;
            column-count: 2;
            column-gap: 18rpx;

            .card {
                display: inline-block;
                margin-top: 20rpx;
                width: 326rpx;
                background: #FFFFFF;
                box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.10);
                border-radius: 14rpx;
                break-inside: avoid;
                padding-bottom: 20rpx;
                overflow:auto;
                }
        }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.