CSS Grid-də tək elementin düzülüşünün qısa yazılışı
Tək elementi həm üfüqi, həm də şaquli ox üzrə eyni zamanda düzləşdirmək olar.
Bunun üçün place-self xassəsindən istifadə olunur.
O, boşluqla ayrılan iki dəyər qəbul edir.
Birinci dəyər şaquli, ikinci dəyər isə üfüqi düzülüşü təyin edir.
Gəlin nümunələr üzərində baxaq.
Şaquli mərkəz və üfüqi başlanğıc
<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 {
place-self: center start;
}
:
Şaquli başlanğıc və üfüqi son
<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 {
place-self: start end;
}
:
Şaquli son və üfüqi mərkəz
<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 {
place-self: end center;
}
:
Praktiki tapşırıqlar
Beş elementdən ibarət bir grid yaradın və onları üç sıra üzərində yerləşdirin. Birinci elementin düzülüşünü üfüqi oxun başlanğıcı və şaquli oxun mərkəzi üzrə təyin edin.
Əvvəlki tapşırığı elə dəyişin ki, üçüncü elementin düzülüşü üfüqi oxun sonu və şaquli oxun mərkəzi üzrə olsun.
İndi grid elementlərini iki sıra üzərində yerləşdirin və beşinci elementin düzülüşünü üfüqi oxun mərkəzi və şaquli oxun sonu üzrə təyin edin.
Elə edin ki, ikinci element üfüqi oxun başlanğıcı və şaquli oxun sonu üzrə, dördüncü element isə üfüqi oxun mərkəzi və şaquli oxun başlanğıcı üzrə düzülsün.
