Свойство grid-row-gap

Описание

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

Синтаксис

grid-row-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-row-gap: 15px;
 grid-column-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

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