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

Question

как расположить блоки, по 4 блока горизонтально и 2 блока вертикально. Также необходимо, что у блоков были разные картинки. Я попробовал написать код, но у меня не совсем получилось

    <div class="portfolio">
      <h1 class="portfolio-text">Портфолио</h1>
      <a class="portfolio-description" href="">Подробнее</a>
      <a class="portfolio-description" href="">Подробнее</a>
      <a class="portfolio-description" href="">Подробнее</a>
      <a class="portfolio-description" href="">Подробнее</a>
    </div>

.portfolio {
     &-text {
         text-align: center;
         font-size: 72px;
         font-weight: 700;
         color: #545454;
     }
     &-description {
        float: left; /*Задаем обтекание*/
        line-height: 150px; /*Высота строки +  верт. центрирования текста*/
        font-size: 14px;
        font-weight: 500;
        background-image: url('/img/portfolio1.png');
        color: white;
        width: 262px; /*Фиксируем ширину блока*/
        margin-right: 20px;
        text-align: center; /*Центрируем текст по горизонтали*/
     }
 }

Как это должно выглядеть:

Answer 1

Вы наверно что-то слышали про grid? Рекомендую изучить.

.portfolio {
  background-color: rgba(0, 0, 0, .05);
}

.portfolio-title {
  text-align: center;
  font-size: 72px;
  font-weight: 700;
  color: #545454;
}

.portfolio-items {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(4, 1fr);
  gap: 8px;
}

.portfolio-item {
  display: block;
  background-color: rgba(0, 0, 0, .05);
  position: relative;
  text-decoration: none;
  min-height: 100px;
}

.portfolio-item span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .05);
  color: white;
}

<section class="portfolio">
  <h1 class="portfolio-title">Портфолио</h1>
  <div class="portfolio-items">
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
    <a class="portfolio-item" href="">
      <img src="https://">
      <span>Подробнее</span>
    </a>
  </div>
</section>

БЛОГ НА HUSL

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

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