Question

我需要这样的砖石网格：

masonry grid

这是否可以仅使用flexbox实现？还是其他任何方式？不想使用砌体库或其他库或框架。

Answer 1

我相信CSS网格会成为你的朋友。

CSS网格布局为网络带来了一个二维布局工具，能够按行和列布置项目。 CSS Grid可用于实现许多不同的布局。它擅长将页面划分为主要区域，或者在从HTML基元构建的控件的各个部分之间定义大小，位置和图层之间的关系。

与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，与表格不同，网格布局没有内容结构，因此可以在表格中实现各种布局。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

这是一款有趣而简单的游戏，可帮助您学习和理解CSS网格。

http://cssgridgarden.com/

Answer 2

<!doctype html>
<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
   </head>
   <body>
      <section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
         <div class="container">
            <div class="row">
               <div class="col-md-8">
                  <img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
               </div>
               <div class="col-md-4">
                  <img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4 ">
               </div>
               <div style="clear:both;"></div>
            </div>
         </div>
      </section>
   </body>
</html>

使用flexbox的砌体网格

2 个答案: