Как сделать сетку при помощи Grid?
Подскажите как при помощи grid разместить блоки таким образом ?
<div class="review" id="review"> <div class="review__container"> <div class="review__card"> <img class="review-photo" src="./img/reviews/01.jpg" width="500" height="888" alt=""> <p class="review__name">Пинчук Александр</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/02.jpg" width="500" height="889" alt=""> <p class="review__name">Дмитрий Пиновский</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/03.jpg" width="500" height="889" alt=""> <p class="review__name">Владислав Загодзюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/04.jpg" width="500" height="281" alt=""> <p class="review__name">Наталья Пидгайная</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/06.jpg" width="500" height="300" alt=""> <p class="review__name">Павел Пиштюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/07.jpg" width="500" height="200" alt=""> <p class="review__name">Олег Смоленко</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/08.jpg" width="500" height="500" alt=""> <p class="review__name">Иван Иванов</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/09.jpg" width="500" height="244" alt=""> <p class="review__name">Владислав Терезюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/10.png" width="500" height="282" alt=""> <p class="review__name">Никита Кодзюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/11.jpg" width="500" height="281" alt=""> <p class="review__name">Тимофей Лановский</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> </div> </div> |
<div class="review" id="review"> <div class="review__container"> <div class="review__card"> <img class="review-photo" src="./img/reviews/01.jpg" width="500" height="888" alt=""> <p class="review__name">Пинчук Александр</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/02.jpg" width="500" height="889" alt=""> <p class="review__name">Дмитрий Пиновский</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/03.jpg" width="500" height="889" alt=""> <p class="review__name">Владислав Загодзюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/04.jpg" width="500" height="281" alt=""> <p class="review__name">Наталья Пидгайная</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/06.jpg" width="500" height="300" alt=""> <p class="review__name">Павел Пиштюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/07.jpg" width="500" height="200" alt=""> <p class="review__name">Олег Смоленко</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/08.jpg" width="500" height="500" alt=""> <p class="review__name">Иван Иванов</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/09.jpg" width="500" height="244" alt=""> <p class="review__name">Владислав Терезюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/10.png" width="500" height="282" alt=""> <p class="review__name">Никита Кодзюк</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> <div class="review__card"> <img class="review-photo" src="./img/reviews/11.jpg" width="500" height="281" alt=""> <p class="review__name">Тимофей Лановский</p> <div class="review__block-stars"> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> <img src="./img/reviews/star.svg" alt=""> </div> <p class="review__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque tellus ac justo aliquet feugiat. Fusce ut sodales augue. Suspendisse.</p> </div> </div> </div>
.review { padding: 15px; } .review__container { display: grid; grid-template-columns: repeat(3, 1fr); align-items: flex-start; gap: 25px; max-width: 1150px; width: 100%; margin: 0 auto; } .review-photo { width: 100%; min-height: 133px; } .review__name { font-size: 16px; font-weight: 700; line-height: 24px; color: black; margin-bottom: 20px; } |
.review { padding: 15px; } .review__container { display: grid; grid-template-columns: repeat(3, 1fr); align-items: flex-start; gap: 25px; max-width: 1150px; width: 100%; margin: 0 auto; } .review-photo { width: 100%; min-height: 133px; } .review__name { font-size: 16px; font-weight: 700; line-height: 24px; color: black; margin-bottom: 20px; }
Дополнительно:
Используйте либо css columns либо js плагины типа masonry (есть и с гридом в основе)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания сетки при помощи Grid в CSS, вы можете использовать свойства display: grid и grid-template-columns (или grid-template-rows) для определения структуры сетки.
Пример создания простой сетки с двумя столбцами:
.container { display: grid; grid-template-columns: 1fr 1fr; }
В этом примере мы создаем контейнер с двумя столбцами, каждый из которых занимает равную ширину (1fr). Если вы хотите создать сетку с различной шириной столбцов, вы можете указать их размеры в пикселях, процентах или других единицах измерения.
Также можно использовать grid-template-rows для определения строк сетки. Например:
.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 200px; }
Этот пример создает сетку с двумя столбцами и двумя строками, где первая строка имеет высоту 100px, а вторая - 200px.
Чтобы разместить элементы в сетке, вы можете использовать свойства grid-column и grid-row. Например:
.item { grid-column: 1 / 3; /* элемент занимает пространство с 1 по 3 столбец */ grid-row: 1 / 2; /* элемент занимает пространство с 1 по 2 строку */ }
Таким образом, вы можете легко создавать и управлять сеткой при помощи Grid в CSS, определяя структуру с помощью grid-template-columns и grid-template-rows, а также размещая элементы с помощью grid-column и grid-row.