CSS Grid-də məzmunun hər iki ox üzrə düzləndirilməsi
Tez-tez grid-də məzmunu eyni zamanda həm üfüqi,
həm də şaquli oxlar boyunca düzləndirmək lazım gələ bilər.
Bu məqsədlə biz əvvəlki dərsdə nəzərdən keçirdiyiniz iki xassəni
birgə istifadə edə bilərik:
justify-content və
align-content.
Şaquli oxun əvvəlinə və üfüqi oxun sonuna görə
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-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;
border: 1px solid #696989;
}
:
Şaquli oxun sonuna və üfüqi oxun əvvəlinə görə
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-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;
border: 1px solid #696989;
}
:
Şaquli oxun mərkəzinə və üfüqi oxun mərkəzinə görə
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: center;
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;
border: 1px solid #696989;
}
:
Praktiki tapşırıqlar
Iki sütundan ibarət bir grid yaradın və altı elementi ona yerləşdirin. Elementləri gridin üfüqi oxunun əvvəlinə və şaquli oxunun mərkəzinə görə düzləndirin.
İndi grid elementlərini üç sütuna yerləşdirin və elementlərin düzləndirilməsini gridin üfüqi oxunun mərkəzinə və şaquli oxunun sonuna görə təyin edin.
Əvvəlki tapşırığı elementlərin düzləndirilməsi gridin üfüqi oxunun sonuna və şaquli oxunun mərkəzinə görə olacaq şəkildə dəyişin.
