Блог

Главная - CSS язык разметки - Свойство CSS | сетки-разрыв строк
You are currently viewing Свойство CSS | сетки-разрыв строк

Свойство CSS | сетки-разрыв строк

Свойство grid-row-gap в CSS используется для определения размера промежутка между элементами сетки. Пользователь может указать ширину промежутка, разделяющего строки, указав значение для сетки-промежуток строк.

Синтаксис:

grid-row-gap: length | percentage | global-values;

Значения Свойств:

  • длина: Пользователь может установить значение зазора между рядами сетки фиксированной длиной, измеряемой в пикселях, см и т.д.

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>
			CSS grid-row-gap Property
		</title>
		
		<style>
			.main {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-row-gap: 20px;
				grid-column-gap: 20px;
				background-color: green;
				padding: 30px;
			}
			
			.main > div {
				background-color: white;
				text-align: center;
				padding: 15px;
				font-size: 25px;
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<div>G</div>
			<div>E</div>
			<div>E</div>
			<div>K</div>
			<div>S</div>
		</div>
	</body>
</html>

Выход:

  • процент (%): Это свойство используется для задания значения зазора между строками сетки в виде процента, где процентные значения относятся к размеру элемента.

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>
			CSS grid-row-gap Property
		</title>
		
		<style>
			.main {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-row-gap: 20%;
				grid-column-gap: 2%;
				background-color: green;
				padding: 30px;
			}
			
			.main > div {
				background-color: white;
				text-align: center;
				padding: 15px;
				font-size: 25px;
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<div>G</div>
			<div>E</div>
			<div>E</div>
			<div>K</div>
			<div>S</div>
		</div>
	</body>
</html>

Выход:

  • глобальная ценность: Это свойство используется для задания значения зазора между строками сетки в виде некоторых фиксированных терминов, которые включают inherit, initial.

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>
			CSS grid-row-gap Property
		</title>
		
		<style>
			.main {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-row-gap: initial;
				grid-column-gap: 20px;
				background-color: green;
				padding: 30px;
			}
			
			.main > div {
				background-color: white;
				text-align: center;
				padding: 15px;
				font-size: 25px;
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<div>G</div>
			<div>E</div>
			<div>E</div>
			<div>K</div>
			<div>S</div>
		</div>
	</body>
</html>

Выход:

Поддерживаемые браузеры: Браузер, поддерживаемый Свойство CSS grid-разрыв строк перечислены ниже:

  • Google Chrome 57.0
  • Internet Explorer 16.0
  • Firefox 52.0
  • Safari 10.0
  • Opera 44.0
Метки: