Адаптивная сетка с использованием flexbox

Рассмотрим пример создания сетки на примере сайта, в котором представлены карточки с товарами. Для верстки воспользуемся методологией BEM. Рассмотрим макет с типовой секцией, которая перечисляет карточку товаров «products».

Для базовых настроек и сброса стилей воспользуемся стилями из статьи №1.

Рассмотрим создание поэтапной адаптивной сетки. Базовый макет:

  <body>
    <header class="header">
      <div class="container">
      </div>
    </header>
    <main>
      <section class="products">
        <div class="container">
        </div>
      </section>
    </main>
    <footer></footer>
  </body>

Создадим разметку компонента Card:

<div class="products__card card">
  <div class="card__header">
    <img class="card__image" src="./assets/product.png" alt="product"/>
  </div>
  <div class="card__body">
    <p class="card__text card__text_description">Кресло с подлокотниками</p>
    <div class="card__text card__text_price">5&nbsp;000&nbsp;&#8381;</div>
  </div>
  <div class="card__footer">
    <button class="card__footer-btn">В корзину</button>
  </div>
</div>

Для того, чтобы создать адаптивную сетку необходимо создать элементы div с классами «products__row» и «products__column», которые будут флексить -> реализовывать адаптивную сетку.

<section class="products">
  <div class="container">
    <div class="products__row">
      <div class="products__column">
        <div class="products__card card">
          -//-
        </div>
      </div>
    </div>
  </div>
</section>

При создании файла стилей будем руководствоваться подходом mobi first.

Mobile First
Mobile First — это подход к созданию макетов, который использует CSS правила, ориентированные на маленькие экраны. Использование медиа запросов min-width.

CSS стили:

.products__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}

.products__column {
  flex: 0 0 auto;
  width: calc(1 / 2 * 100%);
  padding: 0px 4px 49px 0;
}

.products__card {
}

.card__header {
}
.card__image {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.card__body {
  font-size: 12px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: c;
  margin: 16px 0 18px 0;
}
.card__text {
  margin: 0;
}
.card__text_description {
}
.card__text_price {
  font-size: 16px;
}
.card__footer {
}
.card__footer-btn {
  font-size: 12px;
  width: 100%;
  color: #9200b7;
  text-align: center;
  padding: 12px 24px;
  border: 1px solid #9200b7;
  border-radius: 32px;
}

@media (min-width: 768px) {
  .products__row {
    margin: 0 -5px;
  }

  .products__column {
    width: calc(1 / 3 * 100%);
    padding: 0px 5px 65px 0;
  }

  .card__body {
    font-size: 16px;
  }

  .card__text_price {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .products__row {
    margin: 0 -8px;
  }

  .products__column {
    width: calc(1 / 4 * 100%);
    padding: 0px 8px 81px 0;
  }
}

Адаптивная сетка с использованием flexbox

Wazuh Dashboards plugins

Свой reset.css для сброса стилей и задание базовых стилей style.css

Wazuh Dashboards plugins

Свой reset.css для сброса стилей и задание базовых стилей style.css

Вам также может понравиться

Wazuh Dashboards plugins