Свойство grid-column-gap
Описание
Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами.
Синтаксис
grid-column-gap: размер;Пример
<!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>
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 15px;
grid-row-gap: 5px;
width: 300px;
display: flex;
flex-wrap: wrap;
}
#item-t {
width: 80px;
height: 80px;
color: black;
background-color: #97dfc8;
text-align: center;
padding-top: 10%;
}
</style>
<div class='container'>
<div id='item-t'>1</div>
<div id='item-t'>2</div>
<div id='item-t'>3</div>
<div id='item-t'>4</div>
<div id='item-t'>5</div>
<div id='item-t'>6</div>
<div id='item-t'>7</div>
<div id='item-t'>8</div>
<div id='item-t'>9</div>
</div>
</body>
</html>1
2
3
4
5
6
7
8
9
Читайте также
Свойство opacity
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности чере...
Свойство grid-auto-columns
Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позицио...
Свойство quotes
Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои...
Свойство counter-increment
Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте ...
Селекторы атрибутов со значениями через пробел
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы зада...