How to move up various sized 'cells'?

Question

I am a beginner. I have made a mini portfolio gallery. Each 'card' has an image, title, and caption. The problem I am having is that some 'cards' are larger than others (because they have more text in the captions). I want each card to move up kind of like a staggered grid.

I have tried adjusting the margins and other css tricks but I cannot seem to figure this out.

<style>
    .column {
        float: left;
        width: 50%;
        align-content: inherit;
        padding: 5px 10px;;
        border-collapse: collapse;
    }
    .content {
        background-color: #F1F0F0;
        padding: 20px 20px 8px 20px;
    }
    h3 {
    color: #8A6E4B
    }

    @media screen and (max-width: 900px) {
  .column {
    width: 100%;
  }
    @media screen and (max-width: 600px) {
  .column {
    width: 110%;
    </style>

    <div class="row">
      <div class="column">
        <div class="content">
          <img src="a/6711" />
          <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad     minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip   ex ea commodo consequat. Duis aute irure dolor in reprehenderit in   voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

What you want is called a Masonry layout - have a look at this https://stackoverflow.com/q/19244268/10678978 — coops, Mar 28 '19 at 15:10

TVBZ · Answer 1 · 2019-03-28T15:17:53.180

If you want the contents blocks at equal height, try using a css grid:

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
}

h3 {
  color: #8A6E4B
}

<div class="grid">
  <div class="content">
    <img src="a/6711" />
    <h3>Title 01</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="content">
    <img src="a/6705" alt="Title 02" style="width: 100%;" />
    <h3>Title 02</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="content">
    <img src="a/6709" alt="Title 03" style="width: 100%;" />
    <h3>Title 03</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="content">
    <img src="a/6714" alt="Title 04" style="width: 100%;" />
    <h3>Title 04</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

If you want to have auto heights (masonry look), just stack your content divs inside your columns:

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
  margin-bottom: 20px;
}

h3 {
  color: #8A6E4B
}

<div class="grid">
  <div class="column">
    <div class="content">
      <img src="a/6711" />
      <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

This isn't really what the op is asking. – coops Mar 28 '19 at 15:16 — coops, Mar 28 '19 at 15:16
Yes. I misunderstood. Solution added. Thanks. – TVBZ Mar 28 '19 at 15:19 — TVBZ, Mar 28 '19 at 15:19

How to move up various sized 'cells'?

1 Answers1