Итак задача: сделать плитки (карточки с фотографией и заголовками), все они были одного размера (в независимости от размера изображений) и переносились (адаптивность) при изменение размера экрана.
Результат:
- все картинки разного размера.
Css grid адаптивная верстка без медиа запросов
04.03.2021
CSS
.grid3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
place-items: center;
}
.grid3 .item {
background: #EE6E39;
padding: 1em;
border: 1px dashed black;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 10px;
place-items: center;
width: 150px;
height: 150px;
}
.grid3 .item:nth-child(odd) {
background: #D0D0D0;
}
.grid3 .item img {
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
width: 100%;
height: 100%;
object-fit: cover;
}
HTML
<section class="grid3">
<div class="item"><img src="img/500x700_001.jpg" alt="pic"><b>01</b></div>
<div class="item"><img src="img/500x700_002.jpg" alt="pic"><b>02</b></div>
<div class="item"><img src="img/800x600_001.jpg" alt="pic"><b>03</b></div>
<div class="item"><img src="img/800x600_002.jpg" alt="pic"><b>04</b></div>
<div class="item"><img src="img/big_01.jpg" alt="pic"><b>05</b></div>
<div class="item"><img src="img/big_02.jpg" alt="pic"><b>06</b></div>
<div class="item"><img src="img/product.jpg" alt="pic"><b>07</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>08</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>09</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>10</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>11</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>12</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>13</b></div>
<div class="item"><img src="img/small.jpg" alt="pic"><b>14</b></div>
</section>