Numărul și lățimea rândurilor în grid-urile CSS
Elementele grid-ului pot fi, de asemenea, poziționate
pe rânduri. Pentru aceasta este destinată
proprietatea grid-template-rows.
Această proprietate acceptă, separate prin spațiu,
dimensiunile rândurilor. În ea se pot aplica
aceleași valori pe care le-am studiat
și pentru coloane.
Exemplu
De exemplu, să poziționăm blocurile pe patru rânduri:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să specificăm pentru primul și al treilea rând o lățime fixă în pixeli, iar al doilea rând să ocupe spațiul rămas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să folosim funcția repeat
pentru a specifica dimensiunile rândurilor:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să atribuim rândurilor o înălțime de 50px,
iar numărul de rânduri să fie setat
automat cu ajutorul
valorii auto-fill:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Sarcini practice
Poziționați blocurile pe trei rânduri.
Primul bloc să aibă
dimensiunea de 100px,
al doilea 150px,
iar al treilea 200px.
Să aveți în grid-ul dvs. trei rânduri. Faceți ca acestea să aibă aceeași lățime.
