Editor Studio: lavorare con una griglia CSS avanzata
Tempo di lettura: 7 min.
Nell'Editor Studio, puoi utilizzare una griglia CSS avanzata per organizzare il layout di elementi e sezioni. Puoi scegliere il numero di righe e colonne che desideri e impostarne le dimensioni utilizzando misurazioni responsive (ad esempio fr, Min/max, %).
In questo articolo, scoprirai tutto su come lavorare con una griglia CSS:
Passare da una griglia di sezione a una griglia CSS
Le sezioni nell'Editor ti permettono di impostare una griglia di sezione. Questo tipo di griglia è una versione più intuitiva della griglia avanzata, basata sulla stessa logica CSS. Passare a una griglia CSS avanzata ti offre un controllo più preciso sul layout per punto di interruzione.
Nota:
Una volta effettuato il passaggio, non puoi più tornare a una griglia di sezione. Tuttavia, se hai appena eseguito l'azione, puoi utilizzare il tasto Annulla 
in alto a destra dell'Editor.
in alto a destra dell'Editor.Per passare dalla griglia di sezione a una griglia CSS:
- Seleziona la sezione pertinente nell'Editor
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Scorri verso il basso fino a Layout
- Clicca su Applica accanto a Griglia CSS avanzata
- Clicca su Applica griglia CSS
Qual è il prossimo passo?
Personalizza le righe, le colonne e la spaziatura dal pannello Ispezione. Puoi anche trascinare le linee della griglia sull'area di lavoro per spostarle.
Applicare una griglia CSS ad altri elementi
Puoi applicare una griglia CSS agli elementi contenitore, finestra a comparsa, flexbox e liste dinamiche. In particolare nell'elemento lista dinamica, una volta applicata una griglia a un elemento, il resto si aggiorna automaticamente.
Per applicare una griglia CSS:
- Seleziona l'elemento pertinente nell'Editor
- Clicca sull'icona Altre azioni
- Clicca su Applica griglia CSS avanzata
- Scegli un layout dal menu a tendina 1x1
Suggerimento: seleziona Altro se vuoi impostare un numero di righe e colonne personalizzato
Qual è il prossimo passo?
Personalizza le righe, le colonne e la spaziatura dal pannello Ispezione. Puoi anche trascinare le linee della griglia sull'area di lavoro per spostarle.
Personalizzare una griglia CSS
Personalizza la griglia per ottenere il layout esatto che desideri. Puoi modificare il numero di righe e colonne, regolarne le dimensioni e gli spazi vuoti.
Suggerimento:
Quando progetti una griglia, questa si applica solo al punto di interruzione specifico su cui stai lavorando. È necessario personalizzare la griglia in base a ciascun punto di interruzione per garantire che l'aspetto degli elementi sia perfetto.
Per personalizzare una griglia CSS:
- Seleziona l'elemento o la sezione pertinente
- Scegli come vuoi personalizzare la griglia:
Scegli un layout diverso
Aggiungi più righe e colonne
per visualizzare questa opzione. 
Modifica le dimensioni di colonne o righe
Elimina una colonna o una riga
accanto a una colonna o una riga esistente
Modifica la dimensione degli spazi vuoti
Posizionare gli elementi in una griglia
Durante l'aggiunta di elementi alla griglia, diversi strumenti possono aiutarti a impostarne la posizione in modo più accurato.
Agganciare gli elementi
Agganciare gli elementi alla griglia assicura che siano posizionati esattamente come vuoi. Nell'Editor Studio, tutti gli elementi vengono agganciati automaticamente, ma puoi regolare manualmente gli agganci e aggiungere margini.
Spostare gli elementi tra le celle della griglia
Nella sezione Posizione in Ispezione, puoi selezionare un elemento e vedere in quale cella della griglia si trova. Clicca su una cella della griglia per spostare lì l'elemento, senza dover trascinare la sezione.
Puoi anche inserire i numeri di colonna e riga specifici, il che è utile quando devi posizionare un elemento su più celle della griglia.
Tabella delle unità della griglia
Usa l'intera gamma di unità CSS per creare la tua griglia. Puoi impostare le dimensioni di colonne e righe utilizzando percentuali, frazioni o pixel. In alternativa, imposta la dimensione minima e massima delle colonne e delle righe o utilizza i calcoli per creare la griglia che desideri.
Percentuale (%)
Frazione (fr)
Auto
Pixel (px)
Larghezza e altezza viewport (vw e vh)
Contenuto min e max
Min/max
Calcolo
Hai trovato utile questo articolo?
|