Блог

Главная - Вопросы по программированию - Как мне управлять размером изображений с помощью CSS grid?

Как мне управлять размером изображений с помощью CSS grid?

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

Я пытаюсь установить 9 изображений в сетке 3×3, все с одинаковой высотой и шириной. Я могу установить сетку, но пара изображений меньше остальных. Ниже я показываю только то, как я отформатировал одну из фотографий. HTML такой же для остальных 8 фотографий.

 .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}  
 <div class="container">
  <div class="items">
     <div class="item">
        <div class="item-image">
           <img src="/dist/img_resources/vector1.jpg" alt="">
        </div>
        <div class="item-text">
            <p class="item-description">Lorem, ipsum.</p>
            <p class="item-price">$X.XX</p>
         </div>
     </div>
  </div>
</div>

Комментарии:

1. Попробуйте вместо того, чтобы оборачивать изображения, поместить их непосредственно в ячейку сетки. Затем назначьте .items > img { display: block; align-self: normal; }

2. Также вместо использования div рассмотрим figure элемент вместе с figcaption .