Arrange Images in Rows

Question

How can I arrange images (with different heights) in rows such that images in consecutive rows do not have any space between them ? Say image 1 is in row 1 and image k is row 2, so I want no space between 1 and k even if image 1 is not the tallest element in row 1 ?

Implementation is required only with CSS.

How to achieve this ?

Something like this 1, 2, 3 and 4 are images

A sample of what is expected is

What have you tried? What is your expected result? Post your code. — Tanner Babcock, Apr 07 '18 at 07:02
@slash197 Grid is made for this, flex wont do this. https://css-tricks.com/snippets/css/complete-guide-grid/ — Dejan.S, Apr 07 '18 at 07:03
This course by Wes Bos is for free, you will make this there. Check it out here https://cssgrid.io/ — Dejan.S, Apr 07 '18 at 07:04
@TannerBabcock i have tried a lot of different things but not working in any way and i have scrapped all of the code tried, so any help will be highly appreciated. (one good thing i tried was column-count, but images were ordered vertically, but i wanted to be horizontal) — S K, Apr 07 '18 at 07:05
@Dejan.S i am in a bit of a hurry, so can you help me with the code ? — S K, Apr 07 '18 at 07:06
Nope, it does not work like that. I can assist you if you have code, but not to make it, unless you pay me. Because that is what you ask of me. — Dejan.S, Apr 07 '18 at 07:09
you can check this js library (if that is an option), it will probably do what you want. https://masonry.desandro.com/ — Dejan.S, Apr 07 '18 at 07:10
If you're in a real hurry and could live with the images not being ordered from left to right, but top - down, css columns could help - just a thought. — Kasparas Anusauskas, Apr 07 '18 at 07:12

score 2 · Answer 1 · answered Apr 07 '18 at 07:15

I think this is what you are looking for.

Example from W3Schools

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

<!DOCTYPE html>
<html>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

Fecosos · Answer 2 · 2018-04-07T07:28:25.690

A solution could also beusing bootstrap-v4 styles .card-columns and .card to achive a similar result: Bootstrap Docs

.card-columns {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}

.card {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  display: inline-block;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 2px;
  margin-bottom: 15px;
  width: 100%;
}
.card img {
  width: 100%; height: auto;
  margin: 0;
}

<div class="card-columns">
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x100/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">  
      <img src="https://fakeimg.pl/250x600/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x200/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x100/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">  
      <img src="https://fakeimg.pl/250x600/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x200/">
    </div>
  </div>
</div>

agree with your solution but order here is vertical, i want a horizontal order — S K, Apr 07 '18 at 07:31
It's just a different option. But the order here is a bit strange and better suitable for large numbers of cards. — Fecosos, Apr 07 '18 at 07:50

Arrange Images in Rows

2 Answers2