How to add 2 rows and 3 columns images? - html

Question

My idea of this project is to put 2 rows and 3 columns to put images inside them. I'm using Laravel html Css(without Bootstrap).
What I want looks like this:
Any idea how to start it?

Answer 1

Wrap the images and apply display: grid; to the container.
To have 3 columns, use: grid-template-columns: repeat(3, 1fr);
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid img {
width: 100%;
}
<div class="grid">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.jpg">
</div>

Answer 2

Fastest and simplest way to achieve rows and columns is display: flex.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also use grid but grid is more complex and not used as often because it is harder to handle than flex. Flexbox is responsive, adjusts content to screen size so you can expand screen size to see how it works.
Code is very simple. CSS:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
img {
margin: 5px;
}
<div class="container">
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
<img src="https://via.placeholder.com/300x300.jpg" />
</div>
https://jsfiddle.net/rpvjo26y/12/

Answer 3

in terms of html structure this is what you need:
<table>
<tr>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
<td><img src="https://via.placeholder.com/400x300jpg" /></td>
<td><img src="https://via.placeholder.com/400x300jpg"></td>
</tr>
</table>