Masonry box layout not working according to the text using CSS

Question

I am creating a masonry effect like the below image.

I am getting this output

Now my issue is, I have to arrange the heigh to every box according to the content. Just notice in the first on the box it's too big and 11 box content is small.

.wrapper {
  padding: 40px 0;
}

.grid-container-article {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
}

.grid-container-article .grid-item {
  background-color: #FFD966;
  padding: 20px;
}

.grid-container-article .grid-item-1 {
  grid-column: 1/2;
  grid-row: 1/3;
}

.grid-container-article .grid-item-4 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.grid-container-article .grid-item-5 {
  grid-column: 3/4;
  grid-row: 2/4;
}

.grid-container-article .grid-item-6 {
  grid-column: 1/2;
  grid-row: 3/5;
}

.grid-container-article .grid-item-7 {
  grid-column: 2/3;
  grid-row: 3/5;
}

.grid-container-article img {
  width: 100%;
}

<div class="wrapper">
  <div class="container">
    <div class="grid-container-article">
      <div class="grid-item grid-item-1">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-2">
        <h1>2</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>

      </div>
      <div class="grid-item grid-item-3">
        <h1>3</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-4">
        <h1>4</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-5">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>5</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-6">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>6</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-7">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>7</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-8">
        <h1>8</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-9">
        <h1>9</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-10">
        <h1>10</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
      </div>
      <div class="grid-item grid-item-11">
        <h1>11</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
</div>

I forgot to add the code link. Please find here https://jsfiddle.net/90vo3u84/ — user9437856, Sep 21 '20 at 04:49
@Paulie_D, I tried that but not working for me. so I uploaded again — user9437856, Sep 21 '20 at 05:12
I need to understand where is the issue with my code. I edited my question but no response. so I deleted that. masonry layout is not dynamically. — user9437856, Sep 21 '20 at 05:13
No. What you want requires javascript as indicated in the posted duplicate. — Paulie_D, Sep 21 '20 at 06:54
@Paulie_D, I don't want any javascript. I want the only css. Even I haven't tagged the javascript also — user9437856, Sep 21 '20 at 07:03
It does not not matter. You cannot do this with CSS other than as indicated — Paulie_D, Sep 21 '20 at 07:55
Also you have not provided any code which must be in the question. Not a separate link — Paulie_D, Sep 21 '20 at 07:56
@Paulie_D, I added my code in the question. I shared a separate link so that anyone can use test it. — user9437856, Sep 21 '20 at 10:08

Masonry box layout not working according to the text using CSS

0 Answers0