Блог

Главная - CSS язык разметки - Как указать зазор между разделителями в квадратной сетке с помощью начальной загрузки ?
You are currently viewing Как указать зазор между разделителями в квадратной сетке с помощью начальной загрузки ?

Как указать зазор между разделителями в квадратной сетке с помощью начальной загрузки ?

Свойство CSS grid-row-gap используется для задания размера промежутка между элементами строки сетки. Аналогично, свойство CSS grid-column-gap используется для задания размера зазора (желоба) между элементами столбца.

Синтаксис:

  • Свойство CSS сетка-столбец-пробел
grid-column-gap: none|length|percentage|initial|inherit;
  • Свойство CSS сетка-разрыв строк
grid-row-gap: length|percentage|global-values;

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

  • Выберите класс, включающий макет сетки.
  • Укажите значения для свойства зазора в сетке этого класса.
  • Пример:
.container {
	grid-column-gap: <line-size>;
	grid-row-gap: <line-size>;
}

Пример:

<!DOCTYPE html>
<html>

<head>
	<style>
		/* Use grid-row-gap and grid-column-gap
			to specify the gap between the square
			grids the gap between the row is
			specified 10px the gap between the
			row is specified 100px */
		.grid-box {
			display: grid;
			grid-template-columns: auto auto auto auto;

			/* Specify the divider gap measurement in a grid */
			grid-row-gap: 10px;
			grid-column-gap: 100px;
			background-color: yellow;
			padding: 5px;
		}

		.grid-box div {
			background-color: pink;
			text-align: center;
			padding: 15px 0;
			font-size: 25px;
		}
	</style>
</head>

<body>

	<h1>
		Demo to change the divider
		gap in Square grid picture
	</h1>

	<div class="grid-box">
		<div class="item1">gfg</div>
		<div class="item2">gfg</div>
		<div class="item3">gfg</div>
		<div class="item4">gfg</div>
		<div class="item5">gfg</div>
		<div class="item6">gfg</div>
		<div class="item7">gfg</div>
		<div class="item8">gfg</div>
		<div class="item9">gfg</div>
		<div class="item10">gfg</div>
		<div class="item11">gfg</div>
		<div class="item12">gfg</div>
		<div class="item13">gfg</div>
		<div class="item14">gfg</div>
		<div class="item15">gfg</div>
		<div class="item16">gfg</div>
		<div class="item17">gfg</div>
		<div class="item18">gfg</div>
		<div class="item19">gfg</div>
		<div class="item20">gfg</div>
		<div class="item21">gfg</div>
		<div class="item22">gfg</div>
		<div class="item23">gfg</div>
		<div class="item24">gfg</div>
	</div>
</body>

</html>

Выход:

Пример сетки с зазором 50 пикселей между строками и 50 пикселей между столбцами.

Совместимость с браузером:

Поддержка в гибкой компоновке:

  • Chrome: No
  • Firefox: Yes (63.0)
  • Edge: No
  • Internet Explorer: No
  • Opera: No
  • Safari: N0

Поддержка в компоновке сетки:

  • Chrome: Yes (66.0)
  • Firefox: Yes (61.0)
  • Edge: Yes (16.0)
  • Internet Explorer: No
  • Opera: Yes (53.0)
  • Safari: Yes (10.1)

Метки: