CSS Grid-də məzmunun şaquli ox üzrə düzülməsi
Grid-də məzmunun şaquli ox üzrə düzülməsi üçün
biz valideyn elementdə təyin olunan
align-content xassəsindən istifadə edirik.
Oxun başlanğıcına görə
Gəlin grid-də elementlərimiz üçün şaquli oxun başlanğıcına görə düzülmə təyin edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: start;
grid-template-columns: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
bender: 1px solid #696989;
}
:
Oxun mərkəzinə görə
İndi isə gəlin elementlərin şaquli oxun mərkəzinə görə düzülməsini təyin edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: center;
grid-template-columns: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
bender: 1px solid #696989;
}
:
Oxun sonuna görə
Gəlin elementlərin şaquli oxun sonuna görə düzülməsini təyin edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: end;
grid-template-columns: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
bender: 1px solid #696989;
}
:
Praktiki tapşırıqlar
Iki sətirdə yerləşən altı elementdən ibarət bir grid yaradın. Elementlərin grid-in şaquli oxunun başlanğıcına görə düzülməsini həyata keçirin.
İndi grid elementlərini iki sətirdə yerləşdirin və elementlərin grid-in şaquli oxunun mərkəzinə görə düzülməsini təyin edin.
Elementlərin düzülməsinin grid-in şaquli oxunun sonuna görə baş verməsi üçün əvvəlki tapşırığı dəyişin.