Блог

Главная - Вопросы по программированию - Почему моя область сетки CSS ведет себя не так, как должна?

Почему моя область сетки CSS ведет себя не так, как должна?

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

Итак, у меня возникли проблемы с настройкой CSS-сетки внутри другой CSS-сетки, которая работает нормально. Первая (внешняя) сетка CSS определяется с помощью столбца и строки шаблона сетки в дополнение к строке сетки и столбцу сетки, вызываемым для каждого элемента.

Сложность в том, что я хочу повторно использовать многие элементы, которые я использую в первой подсетке, в будущих подсетках, но с другими макетами. Вот почему я решил использовать вызов grid-area. Вот часть моего кода, которая вызывает проблемы:

 .wrapperFour {
  height: 900vh;
  background-color: tan;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9, 100vh);
}

.wrapperFour>div {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iPhone {
  grid-area: iPhone;
  height: 77.4074vh;
}

.featureLogo {
  grid-area: featureIcon;
  height: 116px;
}

.featureInfo {
  color: #4F4F4F;
}

.feature_header {
  grid-area: featureHeader;
  font-family: montserrat_bold;
  font-style: normal;
  font-weight: normal;
  font-size: 55px;
  line-height: 66px;
}

.feature_infotext {
  grid-area: featureInfotext;
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  margin-top: 40px;
}

.feature_cta {
  grid-area: featureCTA;
  height: 80px;
  width: 400px;
  background-color: #2F60A2;
  color: #FFFFFF;
}

.feature_cta_text {
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 42px;
}

.feature_left {
  display: grid;
  grid-template-columns: 13.85vw 21vw 7.81vw 43.49vw 13.85vw;
  grid-template-rows: 11.2vh 11.38vh 9.54vh 27.5252vh 16.66vh 12.3148vh 11.38vh;
  grid-template-areas: ".      .           .       .                   ." ".      iPhone      .       featureIcon         ." ".      iPhone      .       featureHeader       ." ".      iPhone      .       featureInfotext     ." ".      iPhone      .       featureCTA          ." ".      iPhone      .       .                   ." ".      .           .       .                   .";
  background-color: white;
}

.featureOne {
  background-color: rgb(31, 141, 155);
  grid-column: 1;
  grid-row: 1;
}

.featureTwo {
  background-color: rgb(126, 31, 155);
  grid-column: 1;
  grid-row: 2;
}

.featureThree {
  background-color: rgb(103, 119, 148);
  grid-column: 1;
  grid-row: 3;
}  
 <div class="wrapperFour">
  <div class="featureOne">
    <div class="feature_left">

      <div class="iPhone">
        <img src="Assets/iPhone Mockup 1.png" alt="Mockup1" class="iPhone">
      </div>

      <div class="featureInfo">
        <div class="featureLogo">
          <img src="Assets/Feature1Icon.png" alt="Feature 1 Icon" class="featureLogo">
        </div>
        <div class="feature_header">
          Lorem, ipsum dolor.
        </div>
        <div class="feature_infotext">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum fugit error voluptatem tempora! Soluta sit ipsa possimus quidem totam.
        </div>
        <div class="feature_cta">
          <div class="feature_cta_text">
            CTA Button
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="featureTwo">

  </div>
  <div class="featureThree">

  </div>

</div>

Проблема в том, что в правой области сетки отображается только изображение iPhone. Остальное просто остается слева, то есть в первом столбце. Что я делаю не так?

Ответ №1:

Не могли бы вы описать, какова ваша цель? Может быть, сделайте скриншот того, как вы хотите, чтобы это выглядело?

Кроме того, я заметил, что вы используете огромные размеры в своих классах. Например:

 .wrapperFour {
height: 900vh;
background-color: tan;

display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(9,100vh) ;
}

вы установили высоту оболочки равной 900 вч.
Это означает, что высота в 9 раз превышает высоту вашего экрана (vh = высота просмотра)

Вы хотели настроить это таким образом?

еще одна подсказка, которая может вам помочь:

Если вы зайдете в инструменты разработки в Chrome и поместите маркер на свою сетку, вы сможете увидеть макет, который отображается на экране. Затем вы можете попробовать поиграть со свойствами css и посмотреть, как выровнены ваши элементы.

Вот как это выглядит в вашем фрагменте

Комментарии:

1. Да, предполагается 900vh. Я хочу сложить 9 элементов по 100vh каждый. Это должно выглядеть примерно так: ссылка . Когда я запускаю свой код, я даже не вижу кнопки cta. А остальное отображается так, как оно есть в вашем фрагменте. Я бы ожидал, что текст будет располагаться справа от iphone, как указано в моей области шаблона сетки… Второе изображение — это макет, которого я хочу достичь, вот почему я использую область сетки, чтобы иметь возможность повторно использовать элементы вместо того, чтобы переписывать их все 9 раз

2. Попробуйте это: codepen.io/Yziv95/pen/NWNrrqe Просто добавьте девять контейнеров (добавьте инвертированный класс, чтобы изменить их направление)

3. вау, спасибо! ваш код кажется намного проще. Я немного изменил ее, например, vh контейнеров был слишком большим, а желоб не был обязательным, но теперь это именно тот макет, который я искал. Большое вам спасибо!

4. Отлично 🙂 Рад, что смог помочь