0

I tried to make a masonry alignment with 3 columns. However, the first column sometimes will go over to the second column. Can you help to explain this?

SCSS Code: 

.masonry { /* Masonry container */
    column-count: 3;
    column-gap: 1em;

    @media(max-width: 768px){
        column-count: 2;
    }
    @media(max-width: 480px){
        column-count: 1;
    }
    .uk-card { // Masonry bricks or child elements                        
        margin: 0 0 1em;            
    }
}

You can check the masonry test here: https://jsfiddle.net/nnx8fzL2/1/

When to resize the screen to a certain width, the first column will go over the second one.

Dale Nguyen
  • 1,930
  • 3
  • 24
  • 37
  • `The first column will go over the second one`. Are you referring to when the last words from the first card is rendered at the top of the second column? – fubar Jan 03 '18 at 21:52
  • Possible duplicate of [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) – fubar Jan 03 '18 at 21:54
  • @fubar, yes, they're the last words from the first card. Thanks, I can fix it by adding "break-inside: avoid;" – Dale Nguyen Jan 03 '18 at 22:01

0 Answers0