Intereting Posts
При настройке размера шрифта CSS в пикселях значение ссылается на ширину или высоту буквы? Как очистить предыдущее значение текстового поля после отправки формы без обновления всей страницы Использует ли classы смещения Bootstrap правильный метод для центрирования элементов? Можно ли удалить отдельные значения из файла, входящего в несколько элементов? Браузер не масштабируется ниже 400 пикселей? Рекомендации по написанию селекторов jQuery Как создать форму HTML с предварительно заполненными «инструкциями», которые очищаются, когда пользователь нажимает кнопку? Дайте текстовому полю значение, основанное на опции, выбранной из раскрывающегося списка Regex: Габаритные атрибуты HTML, кроме SRC Как проверить, является ли URL-адрес внешним URL-адресом или внутренним URL-адресом с помощью PHP? Динамическое создание HTML-формы с использованием xml и многоразового использования xslt Создайте всплывающее меню с родительскими элементами Разница между этими селекторами Как заставить столбцы разбиваться на строки с помощью flexbox? Изменить фон с помощью setInterval

Области сетки не правильно раскладываются в 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; } 
 
FAq
About-us

При использовании свойства 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; } 
 
FAq
About-us

Если это:

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

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

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

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

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

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

В этой строке кода говорится: «В двух верхних квадратах помещаются логотип и faq соответственно. В нижней части две строки помещаются вокруг нас», и это вызывает ошибку. Если вы хотите, чтобы одна область 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; } 
 
FAq
About-us