0

.grid-1 {
  display: grid;
  grid-template-columns: 587px 1fr;
  grid-gap: 45px 29px;
  max-width: 1025px;
  padding-top: 92px;
}

.gallery_block-1 {
  background-color: #e6eef0;
}

.gallery_block-2 {
  background-color: #f5f5f5;
}

.gallery_block-3 {
  background-color: #fbfafa;
}

.gallery_block-4 {
  background-color: #e6eef0;
}

.gallery-label {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.35px;
  font-weight: bold;
  padding-left: 30px;
}

.gallery-info-1 {
  padding-top: 109px;
}

.gallery-info-2 {}

.gallery-info-3 {}

.gallery-info-4 {}

.gallery-view {
  color: #696969;
  padding-left: 30px;
}
<div class="gallery">
  <div class="container clearfix grid-1">

    <div class="gallery_block-1">
      <div class="gallery-info-1">
        <h4 class="gallery-label">best of whites.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery_block-2">
      <div class="gallery-info-2">
        <h4 class="gallery-label">best of red.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery_block-3">
      <div class="gallery-info-3">
        <h4 class="gallery-label">best of summer.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery_block-4">
      <div class="gallery-info-4">
        <h4 class="gallery-label">best of black.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>

Нужно сверстать галерею из нескольких блоков. Как сделать так, чтоб при задании отступов содержимому каждый блок был разной высоты, как в макете? Пользуюсь css grid.

Эта часть макета

4
  • Как создать минимальный, самодостаточный и воспроизводимый пример. Какие отступы, каким елементам? Уточните, вопрос не понятный. А по факту не вижу в чем проблема, вам нужно создать сетку 3 строки, 2 колонки.
    – E_K
    12 сен 2018 в 16:01
  • codepen.io/Yarik68/pen/qMYoyd Задаю отступ у блока с текстом внутри итема, рядом стоящий блок тоже увеличивается Лучше напишите, как правильно задать столбцы/строки, ибо так не доходит
    – yarik
    12 сен 2018 в 19:21
  • исправьте ссылку, а лучше добавьте в сниппет ваш пример
    – E_K
    12 сен 2018 в 19:26
  • Готово. Проверьте, пожалуйста
    – yarik
    12 сен 2018 в 19:41

1 ответ 1

1

Размеры строк взяты на глаз.

Текст внутри можно позиционировать используя:

  1. position: absolute- первый блок
  2. flex - второй блок

.grid-1 {
  display: grid;
  grid-template-rows: 225px 50px 225px;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 30px;
  max-width: 1025px;
  margin: auto;
  padding-top: 30px;
}
.gallery__block {
  position: relative;
}
.gallery_block-1 {
  background-color: #e6eef0;
}

.gallery_block-2 {
  display: flex;
  padding: 30px;
  align-items: flex-end;
  grid-row: span 2;
  background-color: #f5f5f5;
}

.gallery_block-3 {
  align-items: center;
  grid-row: span 2;
  background-color: #fbfafa;
}

.gallery_block-4 {
  background-color: #e6eef0;
}

.gallery-label {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1.35px;
  font-weight: bold;
}

.gallery-info-1 {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}
<div class="gallery">
  <div class="container clearfix grid-1">

    <div class="gallery__block gallery_block-1">
      <div class="gallery-info-1">
        <h4 class="gallery-label">best of whites.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery__block gallery_block-2">
      <div class="gallery-info-2">
        <h4 class="gallery-label">best of red.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery__block gallery_block-3">
      <div class="gallery-info-3">
        <h4 class="gallery-label">best of summer.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>
    <div class="gallery__block gallery_block-4">
      <div class="gallery-info-4">
        <h4 class="gallery-label">best of black.</h4>
        <div class="gallery-view"><a href="">veiw products</a></div>
      </div>
    </div>

1
  • Теперь ясно. Спасибо!
    – yarik
    12 сен 2018 в 20:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.