CODEWITHSUNDEEP
html
user9701731
user9701731

Reputation:

I need to make a 4 column 3 row image gallery where all these pictures are the same size

So Ive done this before but I cant remember how I did it with CSS. The html I have here was unchanged but its the css Im having problems with. Basically I need a 4 column 3 row grid of these pictures and all the pictures should be the same size and this grid should be centered. I have to do this by editing the CSS but Ive got no clue why nothing im doing is working.

HTML:

</div>
<div class="row"> 
  <div class="column">
    <div class="thumbnail">
        <img src="CS1.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS2.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS3.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS4.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS5.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS6.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div> 
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS7.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS8.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS9.jpg" alt="Counter Strike: Global Offensive Screenshot">
        </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS10.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS11.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS12.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
</div>

CSS:

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

.column {
  padding: 0 4px;
}

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

Upvotes: 0

Views: 156

Answers (1)

Ashish Shah
Ashish Shah

Reputation: 1132

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Try this code

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 1

Related Questions