Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Раскладка контентной страницы
На контентной странице в <body> могут находиться секции и разделы документа, а контейнеры-центровщики будут располагаться внутри каждого из разделов. <body> <header> <div class="container"></div> </header> <main> <div class="container"></div> </main> <footer> <div class="container"></div> </footer></body>.container { width: 1440; margin: 0 auto;}
Замечание Шаг 2. Строим сетку для блоков первого уровня Следующим шагом, когда у нас уже есть общий контейнер (или несколько типовых контейнеров), мы можем создать саму структуру сетки внутри этого контейнера. Раскладка приложения Первый типовой вариант крупной сетки — это так называемая раскладка Holy Grail Layout. «Святой Грааль» — это сетка, которая включает в себя пять разделов — хедер, футер, основное содержимое и две боковых колонки, по одной с каждой стороны. Раскладка выполнена по следующим правилам: · «плавающая» ширина центральной части и фиксированная ширина боковых колонок; · центральная часть в разметке должна идти раньше, чем две боковые колонки (но после хедера); · все три колонки должны быть одинаковой высоты, вне зависимости от содержимого; · футер должен быть всегда прижат к низу, даже если контент не заполняет всю высоту окна браузера. Так выглядит макет:
Замечание Разметка для описанного макета может выглядеть так: <body class="hg container"> <header class="hg-header"> Title </header> <nav class="hg-menu"> Menu </nav> <main class="hg-main"> Content </main> <aside class="hg-aside"> Ads </aside> <footer class="hg-footer"> Footer </footer></body>Первый вариант стилей, с указанием нумерованных грид-линий в свойстве grid-column: .container { width: 1200px; margin: 0 auto;}.hg { display: grid; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; grid-gap: 10px; min-height: 100vh;}.hg-header { grid-column: 1 / 4; /* или вариант через отрицательное значение */ /* grid-column: 1 / -1; */ /* или вариант через ключевое слово span */ /* указываем первый столбец в качестве начала и количество дорожек, которое будет охватывать грид-элемент */ /* grid-column: 1 / span 3; */}.hg-footer { grid-column: 1 / 4;}Про минимальную высоту Второй вариант стилей, с именованием грид-областей: .container { width: 1200px; margin: 0 auto;}.hg { display: grid; grid-template-areas: "header header header" "navigation main ads" "footer footer footer"; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; grid-gap: 10px; min-height: 100vh;}.hg-header { grid-area: header;}.hg-footer { grid-area: footer;}.hg-main { grid-area: main;}.hg-menu { grid-area: navigation;}.hg-aside { grid-area: ads;}
Такой способ более наглядный и гибкий. Для перестроения блоков достаточно поменять количество столбцов и рядов в grid-template-columns/grid-template-rows и указать другой порядок областей в значении свойства grid-template-areas, при этом не меняя разметку. Для «перестроенного» варианта раскладки нужно поправить стили: .hg { … grid-template-areas: "header header" "navigation navigation" "main ads" "footer footer"; grid-template-columns: 1fr 150px; grid-template-rows: 100px auto 1fr 30px;}
|
|||||
|
|
Последнее изменение этой страницы: 2021-01-14; просмотров: 90; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.48.135 (0.005 с.) |
Контейнеры-центровщики для каждого смыслового раздела ограничивают ширину блоков
Типичый сайт в раскладке Holy Grail
Как это выглядит в браузере
Как это выглядит в браузере
