CSS Grid-də sütunlar və sıralar arasındakı məsafə

gap xassəsi vasitəsilə grid-in sütunları və sıraları arasındakı məsafəni eyni vaxtda təyin etmək olar.

Ya bir dəyər, ya da boşluqla ayrılmış iki dəyər ötürülə bilər. Əgər bir dəyər ötürülübsə, o, eyni vaxtda sütunlar və sıralar arasındakı məsafəni təyin edir. Əgər iki dəyər ötürülübsə, onda birinci sıralar arasındakı məsafəni, ikinci isə sütunlar arasındakı məsafəni təyin edir.

Nümunə

Gəlin sütunlar və sıralar arasında eyni məsafə təyin edək:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Nümunə

Gəlin sütunlar və sıralar arasında fərqli məsafələr təyin edək:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Praktiki tapşırıqlar

Sütunlar və sıralar arasındakı məsafənin 10px olduğu bir cədvəl yaradın.

Sütunlar və sıralar arasındakı məsafənin müvafiq olaraq 10px və 5% olduğu bir cədvəl yaradın.