Бисёрӣ аз пайвастшавиҳо сатрҳо ва сутунҳо дар CSS Grid
Биёед гуногун намудҳои пайвастшавиҳои сатрҳо ва сутунҳоро дида бароем.
Намуна
Биёед як ҷадвал созем, ки
хосиятҳои grid-column
ва grid-row-ро муттаҳид карда бошад:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
Намуна
Ва акнун биёед чунон кунем, ки блокҳои якум ва чорум тамоми сатрро ишғол кунанд, блокҳои дуюм - ду сатр ва ду сутун, ва блокҳои сеюм ва чорум - як сатр ва ду сутунро ишғол кунанд:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
Намуна
Биёед чунон кунем, ки элементҳои якум дар ҷадвал тамоми сутунҳоро дар сатри якум ишғол кунад, ва дигар элементҳо дар сатри дуюм ҷойгир шаванд, ки сутунҳои баробар дар паҳноӣ ишғол кунанд:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Намуна
Биёед намунаи гузаштаро тағйир диҳем, то элементҳои дуюм сутунеро ишғол кунад, ки се баробар дар паҳноӣ бузургтар аз сутунҳои элементҳои сеюм ва чорум бошад:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
height: 300px;
width: 400px;
display: grid;
grid-template-columns: 3fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Намуна
Акнун дар сатри якум ду элемент ҷойгир мекунем, барои ҳар яке сутунҳои гуногун дар паҳноӣ муайян карда бошад:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 1 / 2;
grid-column: 4 / 5;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
:
Намуна
Бигзор акнун моро ҷадвале бошад, ки аз панҷ элемент иборат аст. Биёед элементҳои якум дар сатри боло ҷойгир кунем, ва дигарҳои тамом - дар сатри дуюм ҷойгир кунем:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
#elem5 {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
:
Масъалаҳои амалӣ
Ҳамаи элементҳоро ҷойгир кунед мувофиқи намунаи зер:
Ҳамаи элементҳоро ҷойгир кунед мувофиқи намунаи зер:
