Именованные grid-линии и функция repeat

Последнее обновление: 09.05.2017

С помощью ранее рассмотренной функции repeat мы можем растиражировать столбцы и строки, которые создаются между именованными grid-линиями:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
		<style>
			*{
				box-sizing: border-box;
			}
			html, body{
				margin:0;
				padding:0;
			}
			.grid-container {
				height:100vh;
				display: grid;
				grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);
				grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter] 10px);
			}
			
			.grid-item {
                background-color: #ddd;
			}
			
			.special-item{
				grid-column: column 2;
				grid-row: row 1;
				background-color: #bbb;
			}
			.item1{
				grid-column: column 1;
				grid-row: row 1;
			}
			.item2{
				grid-column: column 3;
				grid-row: row 1;
			}
			.item3{
				grid-column: column 1;
				grid-row: row 2;
			}
			.item4{
				grid-column: column 2;
				grid-row: row 2;
			}
		</style>
    </head>
    <body>
		<div class="grid-container">
			<div class="grid-item special-item"></div>
			<div class="grid-item item1"></div>
            <div class="grid-item item2"></div>
            <div class="grid-item item3"></div>
            <div class="grid-item item4"></div>
		</div>
	</body>
</html>

Возьмем из данного примера определение столбцов:

grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);

Первый столбец будет иметь ширину в 10 пикселей. Затем происходит тиражирование столбцов с помощью функции repeat. Она создает подряд три копии двух столбцов. Первый столбец имеет ширину 1fr, то есть имеет пропорциональные размеры, и располагается между grid-линиями "column" и "colgutter". После grid-линии "colgutter" идет еще один столбец шириной в 10 пикселей. И эти два столбца будут повторяться три раза. То есть всего в гриде будет 7 столбцов.

Со строками будет во многом аналогично, только там создается 5 строк с помощью grid-линий "row" и "rowgutter".

При определении стиля элементов, используя имя grid-линий и их порядковый номер, мы можем явным образом указать с помощью свойств grid-column и grid-row, где именно должен располагаться элемент:

.special-item{
	grid-column: column 2;	/* второй столбец с именем column */
	grid-row: row 1;		/* первая строка с именем row */
	background-color: #bbb;
}

Причем свойство grid-column: column 2 указывает на столбец в гриде, который начинается со второй grid-линии "column". В итоге мы получим следующий грид:

Именованные столбцы и строки в Grid Layout и CSS 3

Возможно, многие найдут такой подход более интуитивно понятным для определения позиции элемента.

И более того мы можем дополнительно добавлять новые именованные грид-линии вне функции repeat:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
		<style>
			*{
				box-sizing: border-box;
			}
			html, body{
				margin:0;
				padding:0;
			}
			.grid-container {
				height:100vh;
				display: grid;
				grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px) 
									   [sidebarstart] 150px [sidebarend] 10px;
				grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter] 10px);
			}
			
			.grid-item {
                background-color: #ddd;
			}
			
			.special-item{
				grid-column: column 2;
				grid-row: row 1;
				background-color: #bbb;
			}
			.item1{
				grid-column: column 1;
				grid-row: row 1;
			}
			.item2{
				grid-column: column 3;
				grid-row: row 1;
			}
			.item3{
				grid-column: column 1;
				grid-row: row 2;
			}
			.item4{
				grid-column: column 2;
				grid-row: row 2;
			}
			.sidebar{
				grid-column: sidebarstart / sidebarend;
				grid-row: 2 / 5;
				background-color: #ccc;
			}
		</style>
    </head>
    <body>
		<div class="grid-container">
			<div class="grid-item special-item"></div>
			<div class="grid-item item1"></div>
            <div class="grid-item item2"></div>
            <div class="grid-item item3"></div>
            <div class="grid-item item4"></div>
            <div class="grid-item sidebar"></div>
		</div>
	</body>
</html>

И также стоит отметить, что вне зависимости от того, именованные строки,столбцы и grid-линии или неименованные, мы по прежнему можем позиционировать элементы, используя номера grid-линий, как в данном случае происходит в отношении сайдбара:

.sidebar{
	grid-column: sidebarstart / sidebarend;
	grid-row: 2 / 5;
	background-color: #ccc;
}
Сайдбар в Grid Layout в CSS3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850