CSS Grid-də ayrı bir elementin hər iki ox üzrə düzülməsi

Ayrı bir elementi eyni zamanda həm üfüqi, həm də şaquli oxlar üzrə justify-self və align-self xassələrini birləşdirmək yolu ilə düzmək olar.

Üfüqi oxun əvvəlinə və şaquli oxun mərkəzinə

Gəlin birinci elementimizin düzülməsini üfüqi oxun əvvəlinə və şaquli oxun mərkəzinə təyin edək:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

Üfüqi oxun mərkəzinə və şaquli oxun əvvəlinə

İndi gəlin birinci elementin düzülməsini üfüqi oxun mərkəzinə və şaquli oxun əvvəlinə təyin edək:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

Üfüqi oxun sonuna və şaquli oxun mərkəzinə

Gəlin birinci elementin düzülməsini üfüqi oxun sonuna və şaquli oxun mərkəzinə təyin edək:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

Praktiki tapşırıqlar

Altı elementdən ibarət bir grid yaradın və onları iki sıra üzrə yerləşdirin. Ikinci elementin düzülməsini üfüqi oxun əvvəlinə və şaquli oxun mərkəzinə görə yerinə yetirin.

İndi grid elementlərini üç sıra üzrə yerləşdirin və üçüncü elementin düzülməsini üfüqi oxun mərkəzinə və şaquli oxun sonuna görə təyin edin.

Əvvəlki tapşırığı dördüncü elementin düzülməsi üfüqi oxun sonuna və şaquli oxun mərkəzinə görə olacaq şəkildə dəyişin.

İndi elə edin ki, beşinci elementin düzülməsi üfüqi oxun əvvəlinə və şaquli oxun əvvəlinə görə, altıncı elementin düzülməsi isə üfüqi oxun sonuna və şaquli oxun mərkəzinə görə olsun.