Как на 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; /* Автоматически вычисляет высоту картинки, сохраняя пропорции */
}