Для создания верстки с трех колонок, где каждая ячейка подстраивается под размер фотографии, вам необходимо использовать CSS Grid в комбинации с минимальными и максимальными ширинами для каждой ячейки.
Примерный код блока может выглядеть так:
```html
<div class="grid-container">
<div class="grid-item">
<img src="photo1.jpg" alt="Photo 1">
</div>
<div class="grid-item">
<img src="photo2.jpg" alt="Photo 2">
</div>
<div class="grid-item">
<img src="photo3.jpg" alt="Photo 3">
</div>
</div>
```
А CSS стили могут быть следующими:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, auto);
grid-gap: 10px; /* промежуток между ячейками */
}
.grid-item {
min-width: 0; /* необходимо для того, чтобы фотографии не вылезали за пределы ячеек */
max-width: 100%; /* ограничивает ширину ячеек максимально по возможному размеру фотографий */
}
.grid-item img {
width: 100%; /* растягивает фотографии по ширине ячейки */
height: auto; /* подстраивает высоту фотографии пропорционально */
}
```
Обратите внимание, что в данном примере я использовал свойство `repeat(3, auto)` для определения трех колонок, а также промежуток между ячейками задан через свойство `grid-gap`. Также, фотографии растягиваются по ширине ячейки с помощью `width: 100%;`, а высота подстраивается автоматически с помощью `height: auto;`.
