Главная » CSS3 » Grid » grid-template-areas
60 0  

grid-template-areas

grid-template-areas - Определяет шаблон сетки, ссылаясь на имена областей сетки, которые указаны с помощью свойства grid-area. Повторение имени области сетки приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис обеспечивает визуализацию структуры сетки.


Пример 1 grid-template-areas:

<div class="cont">
  <div style="grid-area: title; background:brown;">1</div>
  <div style="grid-area: nav; background:yellow;">2</div>
  <div style="grid-area: main; background:orange;">3</div>
  <div style="grid-area: aside; background:lightblue;">4</div>
  <div style="grid-area: footer; background:blue;">5</div>
</div>

<style>
.cont {	display: grid;
	grid-template-columns: 100px 100px 100px 100px 100px;
	grid-template-rows:    100px 100px 100px 100px;
	grid-template-areas:
		'title title title title aside'
		'nav main main main aside'
		'nav main main main aside'
		'footer footer footer footer footer';
}
</style>

bully Получим:
grid-areaОбласти грида

Пример 2:

.item-a {grid-area: header;}
.item-b {grid-area: main;}
.item-c {grid-area: sidebar;}
.item-d {grid-area: footer;}
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Это создаст сетку из четырех столбцов в ширину и трех рядов в высоту. Весь верхний ряд будет состоять из области заголовка. Средний ряд будет состоять из двух основных областей, одной пустой ячейки и одной области боковой панели. Последний ряд все нижний колонтитул.

Пример grid-шаблона-областей* Каждая строка в вашей декларации должна иметь одинаковое количество ячеек.


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

Обратите внимание, что вы не называете строки с этим синтаксисом, а только области. Когда вы используете этот синтаксис, строки на обоих концах областей фактически получают имена автоматически. Если имя вашей области сетки - foo, именем начальной строки строки и строки начального столбца будет foo-start, а именем ее последней строки строки и последней строки столбца будет foo-end. Это означает, что некоторые строки могут иметь несколько имен, например крайнюю левую строку в приведенном выше примере, которая будет иметь три имени: header-start, main-start и footer-start.



Варианты написания:

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;


--

Подробнее на MDN


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020