Search code examples
csscss-multicolumn-layout

Adding images to elements inside a CSS multi-column layout produces vertical gaps

I made a multi-column layout according to this blogpost. Vertical gaps between elements are equal. But as soon as I add images inside the elements, these gaps get messed up as you can see below (DIV #1). I am interested in knowing why this is happening and how I can solve the problem.

Note: The images should stay responsive, i.e. if viewport is resized and therefore the column number and cloumn-width changes, the images should fill the width of the sourrounding DIV and adjust their heights automatically.

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}
<div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>

Solution

  • The issue caused by using line-height attribute, just remove it, that would fix your issue. I don't know why you need it here, it will make your paragraph lines 307px apart. checkout the documentation to know more about it.

    body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  /*line-height: 307px; REMOVE THIS LINE FORM ALL*/ 
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}
    <div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>