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

Question

Как расположить 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>

Answer 1

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

.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>

БЛОГ НА HUSL

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

Ответы (1 шт):