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:

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

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