grid-template-columns și rows (unitatea fr, repeat, minmax) în CSS

grid-template-columns: 200px 1fr 2fr;
grid-template-columns: repeat(3, 1fr);             /* 3 coloane egale */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsiv automat */
grid-template-rows: auto 1fr auto;                /* header, corp, footer */

Ce face grid-template-columns și rows (unitatea fr, repeat, minmax)

grid-template-columns desenează structura verticală a grilei.

Inovația majoră este unitatea fr (fracțiune): 1fr reprezintă o fracțiune din spațiul rămas liber. De exemplu, 1fr 2fr împarte spațiul în 3 părți egale: prima coloană primește o treime, iar a doua două treimi.

Funcția repeat(3, 1fr) scurtează codul pentru a nu scrie 1fr 1fr 1fr, iar minmax(200px, 1fr) împiedică o coloană să scadă sub 200px.

Valori uzuale

Valoare	Descriere
fr (fracțiune)	Fracțiune din spațiul liber rămas în container (ex. 1fr, 2fr).
repeat(n, valoare)	Repetă o definiție de coloană de n ori.
minmax(min, max)	Stabilește o limită minimă și una maximă pentru coloană.
auto	Dimensiune calculată pe baza conținutului din celule.

Exemple

Exemplul 1: Grilă cu 3 coloane egale și spațiere de 20px

repeat(3, 1fr) împarte ecranul în trei coloane de lățime identică.

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Efect vizual în browser

Trei coloane perfect simetrice, separate printr-un canal de 20px.

Greșeli frecvente

• Folosirea procentelor (width: 33.33%) în interiorul unui Grid în loc de unitatea nativă 1fr; unitatea fr ține cont automat de proprietatea gap, în timp ce procentele pot cauza depășirea containerului.

Comenzi înrudite

• display: grid: Transformă elementul într-un container grilă bidimensional, capabil să controleze simultan atât rândurile, cât și coloanele.
• gap (row-gap, column-gap): Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.
• grid-column și grid-row (span): Stabilește poziția și întinderea unui element copil peste una sau mai multe coloane sau rânduri ale grilei.