Как на html/css блоками сделать сетку из картинок одинакового размера?

1
2
3
4
5
6
7
8

<div class="grid">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Задает 3 колонки одинаковой ширины */
  grid-gap: 10px; /* Задает промежуток между картинками */
}

img {
  width: 100%; /* Задает картинкам 100% ширины контейнера */
  height: auto; /* Автоматически вычисляет высоту картинки, сохраняя пропорции */
}

1
2

<div id="grid" class="grid">
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Сетка с колонками ширины 200px */
  gap: 10px; /* Промежуток между изображениями */
}

.grid img {
  width: 100%;
  height: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg'];

const grid = document.getElementById('grid');

images.forEach((image) => {
  const img = document.createElement('img');
  img.src = image;
  img.alt = image;

  grid.appendChild(img);
});