Как опустить блоки при использовании columns?

Question

Верстаю из PSD. Есть 4 блока с местом для фото, заголовком и параграфом. Нужно расположить эти 4 блока в 2 столбца, по 2 в каждом. Нашел свойство columns, ввел в него 2 и второй столбик распологается выше, чем первый. Не знаю, как это исправить

.scrinshots {
    font-size: 30px;
    color: #445161;
    text-align: center;
    margin: 0;
    padding: 30px 0 0 0;
}

.images {
    width: 200px;
    height: 150px;
    background: #445161;
    margin: 35px 0 0 0;
}

.descr {
    font-size: 24px;
    color: #445161;
}

.description {
    font-size: 16px;
    color: #445161;
}

.pack {
    margin: -175px 0 0 220px;
}

.block {
    columns: 2;
}

<h2 class="scrinshots">
                Scrinshots
            </h2>

            <div class="block">

                <div class="images">
                
                </div>
            
                    <div class="pack">

                        <h3 class="descr">
                            The description for the image
                        </h3>

                        <p class="description">
                            Pariatur iure ab sunt nesciunt, quibusdam odio iste<br> cumque itaque, ipsa vel exercitationem ullam quos<br> aut nostrum cupiditate fuga quaerat quam animi<br> dolores. Sequi itaque, unde perferendis nemo<br> debitis dolor.
                        </p>

                    </div>

                <div class="images">
                
                </div>

                    <div class="pack">

                    <h3 class="descr">
                        The description for the image
                    </h3>

                    <p class="description">
                        Pariatur iure ab sunt nesciunt, quibusdam odio iste<br> cumque itaque, ipsa vel exercitationem ullam quos<br> aut nostrum cupiditate fuga quaerat quam animi<br> dolores. Sequi itaque, unde perferendis nemo<br> debitis dolor.
                    </p>

                </div>

                <div class="images">
                
                </div>

                <div class="pack">

                    <h3 class="descr">
                        The description for the image
                    </h3>

                    <p class="description">
                        Pariatur iure ab sunt nesciunt, quibusdam odio iste<br> cumque itaque, ipsa vel exercitationem ullam quos<br> aut nostrum cupiditate fuga quaerat quam animi<br> dolores. Sequi itaque, unde perferendis nemo<br> debitis dolor.
                    </p>

                </div>

                <div class="images">
                
                </div>

                <div class="pack">

                    <h3 class="descr">
                        The description for the image
                    </h3>

                    <p class="description">
                        Pariatur iure ab sunt nesciunt, quibusdam odio iste<br> cumque itaque, ipsa vel exercitationem ullam quos<br> aut nostrum cupiditate fuga quaerat quam animi<br> dolores. Sequi itaque, unde perferendis nemo<br>debitis dolor.
                    </p>

                </div>

            </div>

Answer 1

Flex или Grid юзай

.scrinshots {
    font-size: 30px;
    color: #445161;
    text-align: center;
    margin: 0;
    padding: 30px 0 0 0;
}

.images {
    width: 200px;
    height: 150px;
    background: #445161;
    margin: 35px 0 0 0;
}

.descr {
    font-size: 24px;
    color: #445161;
}

.description {
    font-size: 16px;
    color: #445161;
}

.pack {
    margin: -175px 0 0 220px;
}

.block {
    display: flex;
    justify-content: space-evenly;
}

   <h2 class="scrinshots">
      Scrinshots
    </h2>

    <div class="block">
        <div class="a">
   <div class="images"></div>

      <div class="pack">
        <h3 class="descr">
          The description for the image
        </h3>

        <p class="description">
          Pariatur iure ab sunt nesciunt, quibusdam odio iste<br />
          cumque itaque, ipsa vel exercitationem ullam quos<br />
          aut nostrum cupiditate fuga quaerat quam animi<br />
          dolores. Sequi itaque, unde perferendis nemo<br />
          debitis dolor.
        </p>
      </div>

      <div class="images"></div>
      <div class="pack">
        <h3 class="descr">
          The description for the image
        </h3>

        <p class="description">
          Pariatur iure ab sunt nesciunt, quibusdam odio iste<br />
          cumque itaque, ipsa vel exercitationem ullam quos<br />
          aut nostrum cupiditate fuga quaerat quam animi<br />
          dolores. Sequi itaque, unde perferendis nemo<br />
          debitis dolor.
        </p>
      </div>
        </div>
   
      <div class="a">
        <div class="images"></div>

        <div class="pack">
          <h3 class="descr">
            The description for the image
          </h3>
  
          <p class="description">
            Pariatur iure ab sunt nesciunt, quibusdam odio iste<br />
            cumque itaque, ipsa vel exercitationem ullam quos<br />
            aut nostrum cupiditate fuga quaerat quam animi<br />
            dolores. Sequi itaque, unde perferendis nemo<br />
            debitis dolor.
          </p>
        </div>
  
        <div class="images"></div>
  
        <div class="pack">
          <h3 class="descr">
            The description for the image
          </h3>
  
          <p class="description">
            Pariatur iure ab sunt nesciunt, quibusdam odio iste<br />
            cumque itaque, ipsa vel exercitationem ullam quos<br />
            aut nostrum cupiditate fuga quaerat quam animi<br />
            dolores. Sequi itaque, unde perferendis nemo<br />debitis dolor.
          </p>
        </div>
      </div>
     
    </div>

БЛОГ НА HUSL

Как опустить блоки при использовании columns?

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