4

I need a masonry grid like this:

masonry grid

Is this possibile to achieve that using flexbox only? Or any other way? Don't want to use Masonry library or other library or framework.

kukkuz
  • 37,972
  • 6
  • 47
  • 83
Kaysh
  • 83
  • 1
  • 7
  • How about CSS `column-count`? Does that look like it would be helpful to you? – StardustGogeta Dec 07 '16 at 20:35
  • @Kaysh possible with `flexbox` if the heights of the boxes are known.. – kukkuz Dec 08 '16 at 15:12
  • Yes its possible look here: https://codepen.io/dudleystorey/pen/eAqzk – Millard Dec 08 '16 at 15:25
  • 1
    Not easily and generally. Flexbox has "items" which fit into rows and columns, whereas masonry has tiles that can fit together in arbitrary ways. –  Dec 08 '16 at 15:48
  • @TomMillard That is a particular, somewhat limited version of masonry, which still imposes a column structure. –  Dec 08 '16 at 15:51

2 Answers2

0

I believe CSS grid would be your friend here.

CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns. CSS Grid can be used to achieve many different layouts. It excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn't have content structure, therefore enabling a wide variety of layouts not possible in tables.

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

Here's a fun and simple game to help you learn and understand CSS grids.

http://cssgridgarden.com/

Community
  • 1
  • 1
Arnav Aggarwal
  • 710
  • 4
  • 7
0

<!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>
Sweta Lende
  • 1
  • 1
  • Are inline styles needed here? Because while reducing the screen size, the layout is messy. – m4n0 Jul 13 '18 at 06:43