Editor X: utilizzare le griglie
Tempo di lettura: 8 min.
Editor X sta passando a Wix Studio, la nostra nuova piattaforma per agenzie e freelancer.Scopri di più su Wix Studio
Le griglie CSS sono un ottimo modo per garantire che i tuoi elementi siano organizzati in modo strutturato. Nell'Editor X, ogni contenitore e sezione è dotato di una griglia incorporata. Puoi scegliere il numero di righe e colonne necessarie per la composizione e regolarne le dimensioni in molte misure diverse.
In questo articolo, scoprirai tutto su come lavorare con le griglie nell'Editor X:
Vuoi saperne di più?
Dai un'occhiata alla nostra lezione sulle griglie nell'Editor X academy (pagina in inglese).
Modificare una griglia esistente
Ogni sezione e contenitore è dotato di una griglia 1x1 incorporata che puoi regolare. Passa a un layout diverso con un clic o crea la tua griglia trascinando le linee sulla composizione esistente.
Per modificare la griglia:
- Clicca sul relativo contenitore o sezione della pagina
- Modifica la griglia in uno dei seguenti modi:
Scegli un layout
Personalizza la griglia sull'area di lavoro
Suggerimento:
Puoi anche aggiungere una sezione con una griglia incorporata, cliccando sull'icona Aggiungi sezione 
.
.Gestire una griglia dal pannello Ispezione
Personalizza la griglia per ottenere esattamente il layout che desideri. Puoi modificare il numero di righe e colonne, modificare le dimensioni e gli spazi vuoti.
Per gestire una griglia:
- Clicca sulla griglia pertinente
- Clicca sull'icona Impostazioni
nella parte superiore dell'Editor X - Clicca sulla scheda Layout
e scorri verso il basso fino a Visualizzazione - Scegli cosa vuoi fare:
- Scegli un layout diverso: clicca sul menu a tendina Layout per selezionare un aspetto diverso che contenga lo stesso numero di celle della griglia esistente
- Modifica la griglia manualmente: clicca qui sotto per scoprire come:
Aggiungere altre colonne o righe
accanto a Colonne o Righe
accanto a una colonna o riga esistente e seleziona un'opzione:
Modificare le dimensioni delle colonne o delle righe
Modificare le dimensioni degli spazi vuoti
Eliminare una colonna o riga
Usare i punti di interruzione:
Quando progetti una griglia, questa viene mostrata solo sul punto di interruzione specifico su cui si sta lavorando. Dovresti creare una griglia per ogni dimensione dello schermo per garantire che l'aspetto dei tuoi elementi sia perfetto.
Posizionare gli elementi in una griglia
Quando aggiungi elementi e li posizioni sulla griglia, hai a disposizione vari strumenti per creare un layout responsivo:
Ancorare gli elementi
Ancorare gli elementi alle linee griglia assicura che siano posizionati esattamente come desideri. Quando aggiungi un elemento a una cella della griglia, questo viene automaticamente ancorato alle linee griglia verticali e orizzontali più vicine. Puoi modificare l'ancoraggio come preferisci dal pannello Ispezione.
Spostare gli elementi in un'altra cella della griglia
Nella sezione Posizione nelle Impostazioni, puoi selezionare un elemento e visualizzare le celle della griglia in cui è posizionato. Clicca su una cella della griglia per spostare lì l'elemento, senza dover trascinare la sezione.
Allungare gli elementi per riempire una cella della griglia
Allunga gli elementi per riempire una cella della griglia con un solo clic. Se un elemento viene posizionato sulle linee griglia di più di una cella, viene allungato su tutte le celle in cui si trova.
Tabella delle unità della griglia
Usa l'intera gamma di unità CSS per creare la tua griglia. Puoi impostare le dimensioni delle colonne e delle righe utilizzando percentuali, pixel o frazioni. Puoi inoltre impostare la dimensione minima e massima delle colonne e delle righe e persino utilizzare i calcoli per creare la griglia da te desiderata.
Nota:
Puoi impostare la dimensione delle righe e delle colonne in unità diverse. Per impostazione predefinita, le unità per le righe sono in pixel e le unità per le colonne sono in frazioni (fr).
unità | Tipo di unità | spiegazione |
|---|---|---|
Frazione (fr) | Fluide | Imposta le dimensioni delle colonne/righe in modo che siano una frazione delle dimensioni della sezione/contenitore della pagina. Ad es., in una griglia di 2 colonne, se la colonna di sinistra è impostata su 2fr, e quella di destra è impostata su 1fr, la colonna di sinistra occuperà 2/3 della sezione/contenitore. |
Auto | Fluide | L'altezza e la larghezza delle righe e delle colonne vengono impostate automaticamente per adattarsi al contenuto al loro interno. |
Percentuale (%) | Fluide | Imposta la dimensione delle colonne/righe in modo che sia una percentuale della sezione/contenitore. |
Pixels (px) | Fisso | Imposta la dimensione delle tue colonne/righe in modo che sia un numero fisso di pixel dello schermo della sezione/contenitore. 1 px = 1/96 di 1 pollice. |
Larghezza Viewport (vw) | Viewport | Imposta la dimensione delle colonne/righe in modo che sia una percentuale della larghezza della viewport (la dimensione della finestra del browser). Ad es., se la viewport è larga 50 cm, 1vw = 0,5 cm. |
Altezza Viewport (vh) | Viewport | Imposta le dimensioni delle colonne/righe come percentuale dell'altezza della viewport (dimensioni della finestra del browser). Ad es., se la viewport è alta 50 cm, 1vh = 0,5 cm. |
Min/Max | Altro | Imposta la dimensione delle colonne o delle righe su una misura minima e massima. Puoi scegliere una delle unità della griglia quando utilizzi l'opzione. |
Contenuto min | Altro | Imposta la dimensione delle tue colonne/righe perché i contenuti non siano mai più piccoli di così. |
Contenuto max | Altro | Imposta le dimensioni delle colonne/righe per non ottenere mai contenuti più grandi di così. |
calcolo | Altro | Crea un calcolo utilizzando una delle unità della griglia per impostare la dimensione delle colonne/righe. |
Hai trovato utile questo articolo?
|