Как разместить картинки таким методом? Грид, Флекс-бокс?

162

11 февраля 2022, 19:20

Таким образом должны быть размещены таким образом, гридами или флекс-боксами, ну или другим более удобным методом

Answer 1

Очень простой вариант на CSS

.gallery { 
  font-size: 0; 
} 
 
.gallery > img { 
  width: 25%; 
}

<div class="gallery"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=1"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=2"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=3"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=4"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=5"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=6"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=7"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=8"> 
</div>

Вариант на display: table

.gallery { 
  display: table; 
} 
 
.gallery > img { 
  display: table-cell; 
  width: 25%; 
  vertical-align: top; 
}

<div class="gallery"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=1"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=2"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=3"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=4"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=5"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=6"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=7"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=8"> 
</div>

Вариант на Grid

.gallery { 
  display: grid; 
  grid-template-columns: repeat(4,1fr); 
} 
 
.gallery > img { 
  display: block; 
  width: 100%; 
}

<div class="gallery"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=1"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=2"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=3"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=4"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=5"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=6"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=7"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=8"> 
</div>

Вариант на Flexbox

.gallery { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
} 
 
.gallery > img { 
  width: 25%; 
}

<div class="gallery"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=1"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=2"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=3"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=4"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=5"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=6"> 
  <img src="https://via.placeholder.com/300.png/07f/fff?text=7"> 
  <img src="https://via.placeholder.com/300.png/09f/fff?text=8"> 
</div>