Proprietatea grid-template-rows
Proprietatea grid-template-rows stabilește
numărul și lățimea rândurilor pe care
le va ocupa un element în grid sau plasă.
În valoarea proprietății specificăm lățimea rândurilor
în orice unitate
de măsură pentru dimensiuni.
Proprietatea se specifică în elementul-părinte
și determină lățimea rândurilor elementelor-copil.
La specificarea valorilor în pixeli în proprietăți
dimensiunile rândurilor vor corespunde exact acestora.
Dacă specificăm cuvântul auto, atunci rândurile vor
umple tot spațiul disponibil. Utilizarea
unității fr (fracție) înseamnă
că tot spațiul va fi împărțit
în părți egale. Avantajul
fr este adaptabilitatea sa la
diferite containere sau rezoluții de ecran,
deoarece fr pur și simplu împarte spațiul în numărul indicat
de fracții fără a fi legat de o dimensiune exactă în pixeli.
Sintaxă
selector {
grid-template-rows: lățime rând;
}
Exemplu
Să stabilim lățimea rândurilor pentru elementele noastre în grid:
<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: 400px;
}
#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ă umple automat spațiul disponibil:
<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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum cu ajutorul proprietății
grid-template-rows
să facem astfel încât primul și al doilea
rând să ocupe o parte a containerului,
iar al treilea rând - trei părți:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Valorile specificate în unitățile fr
pot lua forme fracționale. Să
modificăm exemplul anterior, specificând
pentru al doilea și al treilea rând lățimea
în numere fracționale:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să specificăm în proprietatea grid-template-rows
funcția repeat(),
care va indica containerului că toate
cele trei rânduri trebuie să aibă aceeași lățime:
<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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum să modificăm exemplul anterior astfel încât la cele trei rânduri identice să se adauge un al patrulea, care va ocupa două fracții ale containerului:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să stabilim primelor două rânduri o lățime de o fracție a containerului, iar ultimelor două rânduri - de două fracții:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum să stabilim lățimea rândurilor
combinând valori, specificate cu ajutorul
funcției repeat() și a unităților libere fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
De asemenea, în funcția repeat() se poate specifica
valoarea auto-fill, care va umple
containerul nostru cu rânduri identice de lățimea dorită:
<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;
}
:
Exemplu
Este foarte convenabil să specificăm împreună cu auto-fill
funcția minmax,
care stabilește intervalul lățimii rândurilor
de la valoarea minimă până la valoarea maximă.
Dacă lățimea containerului nu încap toate
rândurile, atunci unele dintre ele se vor muta
pe un rând nou, iar rândurile din linie
se vor distribui uniform în ea. Să modificăm
exemplul anterior, specificând în el funcția minmax:
<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, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum să specificăm proprietatea auto-fit,
a cărei diferență față de auto-fill constă în faptul
că aceasta ajustează numărul de rânduri la
lățimea disponibilă a containerului, extinzând sau
micșorându-le:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
De asemenea, împreună cu fr se pot
utiliza valori în %, care de asemenea determină
ce parte a containerului va ocupa rândul.
În acest caz, mai întâi se va calcula dimensiunea
rândului în %, iar spațiul liber rămas
va fi împărțit în fracții:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să utilizăm împreună proprietățile
grid-template-columns și
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să creăm cu ajutorul proprietăților
grid-template-columns și
grid-template-rows
un tabel din nouă celule, așezate
în trei rânduri. În plus, al doilea și al treilea rând vor avea aceeași lățime,
iar fiecare coloană - lățime diferită:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum în tabelul din exemplul anterior să facem rândul de sus cu lățimea de două fracții, iar prima coloană - de jumătate de fracție:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Vezi și
-
proprietatea
grid-template-columns,
care stabilește numărul și lățimea coloanelor în grid -
proprietatea
grid-auto-rows,
care stabilește numărul și lățimea rândurilor în gridul implicit
