How To Create A 3 Column Image Grid Using Html And Css?

I am interested to know what is the best practice to create an image grid similar to the image attached using HTML and CSS. Thanks.

Solution 1:

You would use CSS flex container like so.

Here is sample CSS:

.flex-container {
  flex-direction:row;
  display: -webkit-flex;
  display: flex;
  background-color: grey;
  width: 100%;
  height: 100px;
  align-content: center;
  flex-flow: row wrap; 
}

.flex-item {
  background-color: lightblue;
  width: 40%;
  height: 100px;
  margin: 10px;
  order: 1;  
}

Here is sample HTML to go with it:

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
  <div class="flex-item">flex item 4</div> 
</div>

You will need to take this technique and apply it your circumstances.