Как расположить grid вертикально,а не горизонатльно

Рейтинг: 0Ответов: 1Опубликовано: 17.03.2023

Как расположить grid вертикально,а не горизонтально,чтоб было 2 столбика с доставкой и магазинами введите сюда описание изображения

введите сюда описание изображения

.gicons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2);
  text-align: center;
}
<div class="gicons">
    <img src="static/images/image.psd (3).png" alt="">
    <h1>Бесплатная доставка</h1>
 <h5>И бесплатный возврат.
    <br>
Сроки доставки можно узнать
<br>
на странице оформления заказа.</h5>
<p><a href="#">Подробнее ></a></p>

</div>

<div class="gicons">
    <img src="static/images/image.psd (4).png" alt="">
    <h1>Ближайшие магазины</h1>
<h5>Посмотрите, какие магазины
    <br>
наших официальных партнёров
<br>
находятся ближе к вам.</h5>
<p><a href="#">Найти на карте ></a></p>



</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Примерно так можно сделать, когда приложили пример, хоть понятнее стало, что делать)

.gicons {
  text-align: center;
}
.gicons-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
<div class="gicons-wrapper">
  <div class="gicons">
    <img src="static/images/image.psd (3).png" alt="">
    <h1>Бесплатная доставка</h1>
    <h5>И бесплатный возврат.
    <br>
    Сроки доставки можно узнать
    <br>
    на странице оформления заказа.</h5>
    <p><a href="#">Подробнее ></a></p>
</div>

  <div class="gicons">
    <img src="static/images/image.psd (4).png" alt="">
    <h1>Ближайшие магазины</h1>
    <h5>Посмотрите, какие магазины
    <br>
    наших официальных партнёров
    <br>
    находятся ближе к вам.</h5>
    <p><a href="#">Найти на карте ></a></p>
  </div>
</div>