Editor Studio: informazioni su celle e griglie

Tempo di lettura: 3 min.
Le griglie sono uno strumento potente quando si tratta di design responsivo. La griglia è composta da celle e ogni elemento, o gruppo di elementi, ha una propria cella. Ciò mantiene il layout al suo posto su schermi di tutte le dimensioni, assicurando che gli elementi non si sovrappongano.
Puoi aggiungere celle per organizzare una sezione o applicare una griglia CSS avanzata per un controllo più preciso. La griglia CSS è disponibile anche per elementi come contenitori e liste dinamiche che non possono essere divisi in celle.
GIF che passa il mouse sulle celle in una sezione per mostrarne il layout

Griglia di sezione

Nell'Editor Studio, le sezioni sono dotate di una griglia integrata contenente una singola cella (che ospita l'intera sezione). Puoi suddividere il layout della sezione in più celle per dare una struttura responsiva al contenuto. Ci sono vari layout personalizzabili tra cui scegliere.
GIF che mostra il menu a tendina con i layout della griglia disponibili per una sezione
Dopo aver scelto il layout pertinente, perfezionalo in base alle tue esigenze aggiungendo nuove celle o suddividendo quelle esistenti. Per regolare le dimensioni di ogni cella, trascina le linee della griglia sull'area di lavoro.
GIF che mostra come trascinare le linee della griglia sull'area di lavoro

Griglia CSS avanzata

Hai bisogno di un controllo più preciso della griglia di sezione? Passa a una griglia CSS avanzata per regolare le righe, le colonne e le loro dimensioni con misurazioni avanzate (es. fr, Min/max, %). Puoi personalizzare queste impostazioni per punto di interruzione in modo che la griglia sia adatta a tutte le dimensioni di schermo.
Screenshot della sezione Layout in Ispezione dopo aver applicato una griglia avanzata
Applica una griglia CSS avanzata a un'intera sezione o solo a una cella specifica. È anche un modo per aggiungere una griglia ad elementi diversi dalle sezioni, come un contenitore o una lista dinamica. Se l'opzione è disponibile, puoi trovarla nella sezione Layout nel pannello Ispezione.
Screenshot che mostra il pannello Ispezione quando è disponibile l'opzione per applicare la griglia avanzata

Domande frequenti (FAQ)

Clicca su una domanda qui sotto per saperne di più sulle griglie nell'Editor Studio.
Hai degli elementi sovrapposti?
Consulta il nostro video sulla risoluzione dei problemi (contenuti in inglese) per scoprire cosa controllare e risolvere questo problema.

Hai trovato utile questo articolo?

|