Proprietatea grid-template-columns
Proprietatea grid-template-columns stabilește
numărul și lățimea coloanelor pe care
le va ocupa un element în grid sau grilă.
Proprietatea este specificată în elementul-părinte
și determină lățimea coloanelor elementelor-descendenți.
În valoarea proprietății specificăm lățimea coloanelor
în orice unitate
de măsură pentru dimensiuni.
La specificarea valorilor în pixeli în proprietăți,
dimensiunile coloanelor le vor corespunde exact.
Dacă specificăm cuvântul auto, atunci coloanele 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-columns: lățime coloană;
}
Exemplu
Să stabilim lățimea coloanelor 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-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să specificăm pentru prima și a treia coloană o lățime fixă în pixeli, iar a doua coloană să umple automat spațiul disponibil:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum, folosind proprietatea
grid-template-columns
să facem astfel încât prima și a doua
coloană să ocupe o parte a containerului,
iar a treia coloană - trei părți:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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 a doua și a treia coloană lățimea
în numere fracționale:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să specificăm în proprietatea grid-template-columns
funcția repeat(),
care va indica containerului că toate
cele trei coloane 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-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum să modificăm exemplul anterior astfel încât la cele trei coloane identice să se adauge o a patra, 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-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Să stabilim primelor două coloane o lățime de o fracție a containerului, iar ultimelor două coloane - 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-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Acum să stabilim lățimea coloanelor
combinând valori, specificate cu ajutorul
funcției repeat() și 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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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 coloane 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-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
Este foarte convenabil să se specifice împreună cu auto-fill
funcția minmax,
care stabilește intervalul lățimii coloanelor
de la valoarea minimă până la valoarea maximă.
Dacă lățimea containerului nu poate găzdui toate
coloanele, atunci unele dintre ele se vor muta
pe un rând nou, iar coloanele din rând
se vor distribui uniform în el. Să modificăm
exemplul anterior, specificând în el funcția minmax.
Pentru a vedea diferite variante de plasare a coloanelor
modificați lățimea paginii browserului:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 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 coloane la
lățimea disponibilă a containerului, lărgind 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-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplu
De asemenea, alături de fr se pot
utiliza valori în %, care determină de asemenea
ce parte a containerului va ocupa coloana.
În acest caz, mai întâi se va calcula dimensiunea
coloanei î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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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ățimi diferite:
<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-rows,
care stabilește numărul și lățimea rândurilor în grid -
proprietatea
grid-auto-columns,
care stabilește numărul și lățimea coloanelor în gridul implicit
