Sobes.tech
Junior

Hai mai usato un sistema a griglia (sistema a griglia, design a griglia)? Se sì, quale ti piace di più?

sobes.tech AI

Risposta dell'AI

Sì, l'ho usato.

Preferisco usare CSS Grid Layout.

Motivi principali:

  • Nativo. È una specifica standard di CSS, che non richiede librerie esterne.
  • Flessibilità. Permette di creare layout bidimensionali complessi (righe e colonne) con grande precisione e controllo sulla disposizione degli elementi.
  • Responsività. Si adatta facilmente a diverse dimensioni dello schermo, usando query @media e unità di misura come fr.
  • Pulizia del codice. Rispetto al modello a scatola, Grid spesso semplifica il markup, riducendo la necessità di elementi wrapper aggiuntivi.

Esempio di utilizzo di base:

/*
  Elemento contenitore con display grid.
  Definiamo tre colonne di uguale larghezza e due righe con altezza automatica.
*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; /* Spazio tra gli elementi */
}

/*
  Esempio di posizionamento di un elemento all'interno della griglia.
  Estendiamo l'elemento su due colonne, partendo dalla seconda.
*/
.item {
  grid-column: 2 / span 2;
}

In passato ho anche usato Bootstrap Grid System, che si basa su Flexbox. È utile per creare rapidamente layout tipici, ma meno flessibile per strutture complesse e legato a classi CSS specifiche.

In generale, CSS Grid fornisce strumenti più potenti e flessibili per creare layout moderni e complessi senza dover dipendere da framework esterni.