Masonry Grid Layout CSS

Question

I'm trying to create a layout that is 3 columns and each column should only be able to have 2 groups of elements of any size. The groups of items should flow into the next column top to bottom

I not familiar with the limitations of css grids. Is this possible to do with only using CSS? Here is a code example of what I'm trying to achieve without the masonry type effect for the groups.

Example A

Example B

HTML

<div class="container">
    <div class="group-1 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
    </div>
    <div class="group-2 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
    </div>
    <div class="group-3 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
      <div class="item-5 item">item 5</div>
      <div class="item-6 item">item 6</div>
    </div>
    <div class="group-4 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
    </div>
    <div class="group-5 group">
      <div class="item-1 item">item 1</div>
    </div>
    <div class="group-6 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
    </div>
</div>

CSS

/* ================================= 
  Flexbox
==================================== */

.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 30em) {

  .container {
      grid-template-rows: 1fr 1fr;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
 }
}

/* ================================= 
  Page Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-size: 1.35em;
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}

.container {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin: 45px auto;
    box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}

.group {
    color: #fff;
    padding: 15px;
    margin: 5px;    
    background: #3db5da;
    border-radius: 3px;
}

.item {
    color: #fff;
    padding: 15px;
    margin: 5px;    
    background: #1f6980;
    border-radius: 3px;
}

http://jsbin.com/quheday/1/edit?html,css,output

You won't be able to _move_ child elements between different parents using CSS, for that you will need script. — Asons, Jan 24 '18 at 18:53
@LGSon I'm not necessarily trying to move child elements. Each group will always have the associated elements. I'm trying to position the groups in a masonry style. Once column one gets two groups, the third group will flow into column 2. In my code example, this is working the way I want but the button groups are positioned at the bottom of the highest group from the top row instead of the group above it inside of the same column — visualbam, Jan 24 '18 at 19:02
Since you e.g. have an _item nr.1_ in more than one group, it's not possible to position them together (w/o script), as shown in your images, hence they need to be moved between parents. Well, technically you could do it using absolute positioning, but not practically. — Asons, Jan 24 '18 at 19:13

score 0 · Answer 1 · answered Oct 06 '22 at 09:47

Maybe this could help. I use this workaround for all my fake masonry layouts and it's responsible.

Code in style.scss file.

.masonry-3-col {
    max-width: 100%;
    margin: 0 auto;
    column-count: 1;
    column-gap: 1em;


    @media all and (min-width: $display-tablet) {column-count: 2;}
    @media all and (min-width: $display-desktop) {column-count: 3;}

    > div {
        width: 100%;
        overflow: hidden;
        margin-bottom: 1em;
    }
}

$display-tablet and $display-desktop are internal variables like 768px and 1024px.

Code in Html File

<div class="masonry-3-col">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
   <div>Item 6</div>
   <div>Item 7</div>
</div>

That's all

Masonry Grid Layout CSS

1 Answers1