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

Описание

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

Синтаксис

grid-column-start: auto | span n | 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-start: 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

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