How to create a 3 column image grid using html and css? [closed]

问题

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 2 years ago.

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.

回答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.

来源：https://stackoverflow.com/questions/42077309/how-to-create-a-3-column-image-grid-using-html-and-css