Reputation:
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
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