Свойство grid-column-end

Описание

Определяет местоположение в сетке ссылаясь на конкретные линии.
grid-column-end / grid-row-end — это линия на которой элемент заканчивается.

Синтаксис

grid-column-end: auto | span | column-line;
Значение Описание
line Может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию.
span number Элемент, который будет охватывать предоставленное количество треков.
span name Элемент будет будет охватывать пока не достигнет линии с указанным названием.
auto Указывает автоматическое размещения, автоматическое охват, или охват по умолчанию.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .grid-container {
 display: grid;
 grid-template-columns: auto auto auto auto;
 grid-gap: 10px;
 background-color: #2196f3;
 padding: 10px;
 }
 .grid-container > div {
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
 padding: 20px 0;
 font-size: 30px;
 color: black;
 }
 .item1 {
 grid-column-end: 4;
 }
 </style>
 <div class='grid-container'>
 <div class='item1'>1</div>
 <div class='item2'>2</div>
 <div class='item3'>3</div>
 <div class='item4'>4</div>
 <div class='item5'>5</div>
 <div class='item6'>6</div>
 </div>
</body>
</html>
1
2
3
4
5
6

Читайте также