Editor X: scegliere tra Flexbox e strumenti Griglia

Editor X offre vari strumenti di layout che puoi utilizzare per organizzare i tuoi elementi, ognuno dei quali ha scopi diversi. Questi strumenti sono in realtà basati su due tecnologie CSS comuni: Griglia e Flexbox. È importante tenere a mente questa informazione quando si pianificano composizioni complesse. 

Una griglia è un modello CSS bidimensionale che puoi trovare anche nell'Editor X, le due dimensioni sono colonne e righe. Quando si progettano layout reattivi di grandi dimensioni, le griglie consentono di controllare la struttura degli elementi man mano che vengono posizionati all'interno delle celle predefinite. 

L'elemento Griglia nell'Editor X è una vera griglia CSS, che può essere usata per creare layout complessi, definendo al contempo il loro comportamento reattivo. Puoi scegliere il numero o la dimensione delle colonne/righe per ogni punto di interruzione, in modo che la composizione sia sempre perfetta.

Quando imposti le dimensioni di colonne, righe e spazi vuoti, ci sono molte metriche fisse e fluide da utilizzare come px, percentuale, fr, ecc.

Un contenitore è lo strumento di layout più semplice per creare composizioni. Puoi allegare elementi a questo riquadro contenitore, in modo che diventi automaticamente il loro elemento "padre" e definisca la loro struttura. È un ottimo strumento per creare composizioni "autonome" che dovrebbero essere più piccole di una sezione. 

Una sezione di pagina è un contenitore che definisce la struttura di tutti gli elementi "figli" ad esso collegati. Puoi scegliere di applicare una griglia alla sezione o posizionare gli elementi in base alle tue esigenze. 

Flexbox è un modello CSS unidimensionale che usiamo nell'Editor X per la maggior parte dei nostri strumenti di layout. In questi strumenti, gli elementi si regolano automaticamente (ad es. sono flessibili) per adattarsi allo spazio nell'elemento principale, sia che si avvolga, si espanda per riempire lo spazio o si rimpicciolisca per adattarsi ad esso.

Una pila è un contenitore flessibile e trasparente che contiene elementi disposti in ordine verticale. Ad esempio, puoi impilare più caselle di testo o un elemento di testo e un tasto posizionato sotto di esso. L'impilamento mantiene intatti i margini tra gli elementi e impedisce agli elementi di sovrapporsi su schermi più piccoli.

Un Layouter è un contenitore flessibile che contiene diversi elementi in un layout a tua scelta. Gli elementi del Layouter sono contenitori, quindi puoi aggiungere elementi in una composizione libera o applicare una griglia, se vuoi strutturarla. 

Ti basta scegliere un tipo di vista (ad es. Slider, Mosaico, Colonne) e il Layouter farà il resto: i tuoi elementi si dispongono per apparire al meglio in ogni punto di interruzione. Detto questo, puoi scegliere un tipo di vista diverso per ogni viewport (ad esempio, i layout Slider sono perfetti per i dispositivi mobile).

Una Lista dinamica è un contenitore flessibile che contiene diversi elementi in un layout a tua scelta. Le liste dinamiche sono l'ideale quando vuoi che ogni elemento abbia lo stesso layout e design, ma contenuti diversi, come le liste. Layout e design si regolano in automatico, quindi non dovrai mai preoccupartene. 

Ciò che rende uniche le Liste dinamiche è la possibilità di collegarle alle raccolte di contenuti. Ciò consente di gestire e aggiornare il contenuto dal back-end, senza influire sul design effettivo. 

Prima di selezionare uno dei nostri strumenti, pianifica il layout desiderato per ogni dimensione dello schermo. Quindi, scegli lo strumento di layout che include ciò di cui hai bisogno. 

Clicca qui sotto per conoscere alcune delle differenze chiave tra gli strumenti di layout nell'Editor X: