2

I have created a masonry grid with column-count property (column-count: 4;). All div elements in the grid are displayed vertically.

Is there a way to display them horizontal with js/jQuery?

Code example: https://codepen.io/anon/pen/EzMbPo

<div id="categories">
    <div class="item">
      <p>1</p>
    </div>
    <div class="item">
      <p>2</p>
    </div>
    <div class="item">
      <p>3</p>
    </div>
    <div class="item">
      <p>4</p>
    </div>
    <div class="item">
      <p>5</p>
    </div>
    <div class="item">
      <p>6</p>
    </div>
    <div class="item">
      <p>7</p>
    </div>

Object object
  • 872
  • 6
  • 18
CodeAndCode
  • 69
  • 1
  • 7
  • Hi Angelic, what is the point of displaying them horizontally ? Is it for responsive ? – Jake Jun 04 '19 at 07:21
  • Hi, no. I would like to set them horizontally because I will add animations and I would like them to start from left to right if i select first 8 children of parent div. When I add animation they start vertical (from top to bottom) first column. And I have to use masonry grid. – CodeAndCode Jun 04 '19 at 07:36
  • The perfect thing would be to have horizontal masonry grid, from left to right. – CodeAndCode Jun 04 '19 at 07:38
  • And you can't use `display: grid` instead of `column-count` ? Unless you need to keep a fluid layout ? – Jake Jun 04 '19 at 07:49
  • I need fluid layout, but I don't know how to create masonry grid with display:grid. Can you post some code? – CodeAndCode Jun 04 '19 at 07:51
  • Check out [this article](https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb) by Andy Barefoot or [this one](https://w3bits.com/css-grid-masonry/) on W3bits for example, my favorite one however would be [Approaches for a CSS Masonry Layout](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/) over at CSS Tricks. – Jake Jun 04 '19 at 07:54

1 Answers1

1

If you just want them to show side by side you can add display: flex to the categories div, as following:

#categories{
  display: flex;
  -webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
    -webkit-column-gap:1em;-moz-column-gap:1em;column-gap: 1em;
}

The default for flex is to display as a row (re: horizontal).

Check out this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Edit:

I think that using grid might be better for your problem. if you try something along these lines it should work:

#categories{
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap:1em;
  -moz-column-gap:1em;
  column-gap: 1em;
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(80px, 1fr));
  grid-auto-rows: 80px;
  grid-auto-flow: dense;
}

.item{
    display: inline-block;
    margin: 0 0 1em;
    padding:1em;
    width: 100%;
    border:3px solid #fff;
    border-radius: 30px;
    height:100px;
}

.item p{color:#59a3b6;text-align:center;font-weight:500;}

#categories .item:nth-child(1n+2){
  height:200px; 
  grid-row: span 1; 
  grid-column: span 2;}

#categories .item:nth-child(2n){height:250px; grid-row: span 2; grid-column: span 1;}

#categories .item:nth-child(3n){
  height:120px;
  grid-row: span 4; 
  grid-column: span 4;
}

#categories .item:nth-child(4n){
  height:140px;
  grid-row: span 1; 
  grid-column: span 1;
}

#categories .item:nth-child(5n){
  height:300px;
  grid-row: span 3; 
  grid-column: span 6;
}

Basically I added display: grid; to the parent item, and then grid grid-row: span 1; grid-column: span 2; to the children. You'll still have to play around with it, but it should get you along the way to what you want.

Follow this video, she does a great job explaining the concept.

Hope this helps, good luck!

yosefc
  • 60
  • 8
  • This is not what i need, I need masonry grid that goes from left to right. I tried flexbox, but i cant get masonry grid style. – CodeAndCode Jun 04 '19 at 07:39
  • This video by Jen Simmons might help: https://www.youtube.com/watch?v=qNtJ5p3h2A4&list=PLbSquHt1VCf18lllS0C5quAaOcsuMAC70&index=3 – yosefc Jun 04 '19 at 07:51
  • Yes and then i have to make width of div 24%, there must be 4 divs in row. And i lost masonry grid now. Tried that already. https://codepen.io/anon/pen/byZamM – CodeAndCode Jun 04 '19 at 07:54