dexblog.ro
CSS Toate proprietățile CSS

Grilă responsivă automată (repeat, auto-fit, minmax) în CSS

CSS Grid (Layout bidimensional) CSS3+

Cea mai populară rețetă CSS modernă: creează o grilă de carduri 100% responsivă fără a scrie niciun media query.

Sintaxă CSS 
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

Ce face Grilă responsivă automată (repeat, auto-fit, minmax)

Formula magică repeat(auto-fit, minmax(280px, 1fr)) rezolvă automat adaptarea pe orice rezoluție de ecran:

• Pe un ecran mare de desktop, browserul pune 4 sau 5 coloane.
• Pe tabletă, coboară automat la 2 sau 3 coloane.
• Pe telefon, dacă lățimea scade sub 280px, trece automat pe o singură coloană de 100%.
Totul funcționează complet automat, fără a necesita nici măcar o singură regulă @media!

Valori uzuale

Valoare Descriere
auto-fit Creează câte coloane încap; dacă sunt puține carduri, le lățește să umple rândul.
auto-fill Rezervă spațiu pentru coloane noi chiar dacă nu există carduri pentru ele.
minmax(280px, 1fr) Fiecare card are cel puțin 280px, dar se poate extinde până la 1fr.

Exemple

Exemplul 1: Grilă de produse sau articole perfect adaptabilă pe mobil și desktop

O singură linie de cod gestionează layout-ul pe telefon, tabletă și laptop.

.grila-produse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

Efect vizual în browser

Produsele se aliniază pe 4, 3, 2 sau 1 coloană în mod fluid, în funcție de mărimea ecranului pe care este deschisă pagina.

Greșeli frecvente

  • Setarea unei valori minime prea mari în minmax (de exemplu minmax(400px, 1fr)); pe telefoanele cu ecran de 360px sau 390px, cardul va forța apariția barei de derulare orizontale. Valoarea minimă recomandată este între 250px și 280px.

Comenzi înrudite