Как создать сетку изображений с тремя столбцами, используя html и css?

Question

Мне интересно узнать, какая оптимальная практика для создания сетки изображений, подобной изображению, прикрепленному с использованием HTML и CSS.

Спасибо.

Answer 1

Вы должны использовать CSS гибкий контейнер, как так.

Вот пример 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; 
} 

Вот пример HTML, чтобы пойти с ним:

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

Вам нужно будет взять эту технику и применять его ваши обстоятельства.