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; } LOGO 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; }
LOGO 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; }
LOGO FAq About-us