Question 207249 in CSS Question posted in
Some basic documentation can be found here.

CSS Grid with uneven rows (Pinterest style)

I’m trying to create a grid of links (img + text) that will be 3 columns and multiple rows. The problem is that my images are not the same height, so I’m getting a result like this:enter image description here

I’m trying to find what CSS Grid property I need to get a result like this.enter image description here

I tried to just do 3 divs (for each column) with multiple links inside them, but the order isn’t correct when responsive.

Can you guys help? Thanks a lot.

Tags:

3

Answers


  1. 0

    overflow:hiddin,
    display:inline-block,
    background:cover,

    Login or Signup to reply.
  2. 0

    I guess, you can put display: flex to parent div
    And then in each column add number of images you want to render

    <div class='parent'>
  <div class='column'>
    <img src='/img-1' />
    <img src='/img-4' />
    <img src='/img-7' />
  </div>
  <div class='column'>
    <img src='/img-2' />
    <img src='/img-5' />
    <img src='/img-8' />
  </div>
  <div class='column'>
    <img src='/img-3' />
    <img src='/img-6' />
    <img src='/img-9' />
  </div>
</div>

    Now you don’t have to worry about the different image heights.

    Login or Signup to reply.
  3. 0

    Try this:

    .grid-container {
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box.one {
  height: 200px;
  background-color: #fab1a0;
}

.box.two {
  height: 300px;
  background-color: #74b9ff;
}

.box.three {
  background-color: #55efc4;
  height: 400px;
}

.box.four {
  background-color: #ffeaa7;
  height: 500px;
}

.box.five {
  background-color: #fdcb6e;
  height: 600px;
}

.box.six {
  background-color: #a29bfe;
  height: 200px;
}
    <div class="grid-container">
  <div class="box one">1</div>
  <div class="box three">2</div>
  <div class="box one">3</div>
  <div class="box three">4</div>
  <div class="box four">5</div>
  <div class="box five">6</div>
  <div class="box one">7</div>
  <div class="box two">8</div>
  <div class="box six">9</div>
  <div class="box three">10</div>
  <div class="box two">11</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search