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

Описание

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

Синтаксис

grid-column-start: auto | span n | column-line;

Пример

<!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

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

Стили поля с неверными значениями, выходящими из заданного диапазона

Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазо...

Свойство border-collapse

Определяет, должны ли границы таблицы быть разделены или объединены.

Свойство table-layout

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

Свойство unicode-bidi

В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст...

Свойство writing-mode

Устанавливает направление текста на странице — по горизонтали или вертикали.

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