Use css to implement this layout

clipboard.png

how to implement this layout with css. The height of the parent element is not fixed, and it adapts itself according to its contents.

Mar.04,2022

demo, css Falls flow see for yourself.


are there any requirements for the width of the three columns? Which columns are wide and which columns are adaptive? It can be described in more detail.


css waterfall flow. Baidu has many methods


waterfall flow. If the content is uncertain, you need to use js


to rasterize the layout. First set up three large columns of containers, and then put pictures in each. The large container uses col-md-4 , and the picture container in it uses 12, that is, one picture in each column has a single row.


learn the flex layout

Menu