Неправильная разметка областей сетки в CSS Grid

Я хочу создать свой веб-сайт с использованием системы сетки CSS, но, похоже, она не работает. Вот мой код:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>


html css css-grid
person Bashir Abdelwahed    schedule 12.08.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

При использовании свойства grid-template-areas строковые значения должны иметь одинаковое количество столбцов.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Вы можете использовать точку или непрерывную строку точек для представления пустой ячейки (справочная информация).

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" " ... about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Из спецификации Grid:

7.3. Именованные области: the grid-template-areas свойство

Все строки должны иметь одинаковое количество столбцов, иначе объявление недействительно.

Если именованная область сетки охватывает несколько ячеек сетки, но эти ячейки не образуют один заполненный прямоугольник, объявление недействительно.

Непрямоугольные или отдельные области могут быть разрешены в будущей версии этого модуля.

Примечание. Как указано в спецификации, в дополнение к равному количеству столбцов области сетки также должны быть прямоугольными (см. Этот пост для получения более подробной информации.).

person Michael Benjamin    schedule 12.08.2017

arrow_upward
0
arrow_downward

Если это:

введите описание изображения здесь

Это желаемый результат, значит, вы допустили лишь незначительную ошибку.

Здесь вы установили сетку в виде квадрата 2 x 2:

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

Но вы не заполняете все пространство.

  grid-template-areas: "logo faq", "about-us";

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

  grid-template-areas: "logo faq", "about-us about-us";


.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq", "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}
<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

person James Douglas    schedule 12.08.2017
comment
но я следил за учебными пособиями в Интернете, и все они говорили мне, что я могу выразить это так ... Есть ли причина, по которой вы говорите мне, что это так? у вас есть ссылка ???? - person Bashir Abdelwahed; 12.08.2017