Posizionamento griglia senza cornice/stili float

Question

Sto attraversando un periodo difficile a comprendere completamente come utilizzare Frameless Grid. Voglio dire, capisco completamente il concetto. Sembra fantastico.

Credo che il mio manzo sia solo che non offre nulla nel modo di posizionare i tuoi elementi. Imposta solo la loro larghezza, e basta. Quindi, anche se applichi le larghezze delle colonne ai tuoi elementi, tutto si limita a stack a meno che non inizi a fluttuare o posizionare in modo assoluto.

A questo proposito, suppongo di essere in cerca di alcuni consigli sull'esistenza di alcuni stili di posizionamento universali che posso utilizzare per mantenere questi elementi impilabili.

Oppure è troppo ampio? Devo posizionare i miei elementi caso per caso?

(anche solo un SASS FYI Sto utilizzando, nel caso in cui aiuta a tutti)

Grazie!

Answer 1

UPD: Frameless Grid ha creato il codice effettivo (SASS, LESS e JS), quindi la risposta di seguito è obsoleta.

Frameless è più un approccio che un quadro di griglia.

Non fa nulla da solo, a parte una singola funzione per il calcolo della griglia (anche senza una documentazione adeguata su come utilizzare effettivamente questa funzione).

Diamo un'occhiata:

---

1. Effettuare un regolare griglia a larghezza fissa.

Scegli una larghezza di colonna, una larghezza di gronda ... sai, le solite cose. Non preoccuparti della quantità di colonne ancora, ma altrimenti usa qualsiasi criterio che usi solitamente per creare griglie a larghezza fissa. Raccomando di usare una larghezza della colonna relativamente piccola per una maggiore flessibilità.

Dobbiamo assemblare una griglia per conto nostro. Usa qualsiasi materiale per ottenerlo, Frameless non ne fornisce. La larghezza della colonna deve essere fissa.

---

2. Ne fanno ripetere all'infinito.

Ora, dai alla tua griglia un numero infinito di colonne, in modo che, a prescindere dalla larghezza della tua vista, vengono visualizzate sempre più colonne. Immagina di guardare un nido d'ape infinitamente ampio pieno di colonne anziché esagoni.

Per "numero infinito" sembrano indicare "qualsiasi numero necessario". La homepage Frameless funziona con affascinanti 26 colonne (per visualizzarle è necessaria una larghezza di visualizzazione di 1920px), ma frameless.scss fornisce solo variabili per 16 colonne.

"Dare alla griglia un numero di colonne" significa "creare un progetto che sfrutti al massimo una certa quantità di colonne".

---

3. Centro nel viewport.

Allineare la griglia orizzontalmente al centro della visualizzazione. Per una griglia con un numero pari di colonne (nella foto), allinea il punto centrale della tua vista al centro della grondaia tra le due colonne più centrali. Per una griglia dispari, allinearla al centro della colonna più centrale.

Questo è molto semplice, ma ci impone di eseguire manualmente un'altra riga di codice CSS.

---

4. Questo è tutto, davvero.

Inizia a utilizzare la griglia. Utilizza le query multimediali per adattare il tuo progetto man mano che più colonne diventano disponibili. Dato che dovrai adattare colonne per colonna anziché pixel per pixel, puoi scegliere esattamente quando il tuo layout dovrebbe e non dovrebbe adattarsi. Ad esempio, questo sito si adatta solo a 320, 480, 600, 900 e 1900 pixel. Per vederlo in azione, prova a ridimensionare la finestra del browser.

No, questo non è "it". Ecco dove inizia effettivamente il lavoro.

È necessario codificare manualmente la griglia per adattarla alle varie finestre e Frameless non fornisce alcuno strumento.

---

Quindi, se siete alla ricerca di strumenti che è possibile utilizzare per assemblare una griglia, mi raccomando Susy. È un pezzo grande ed elegante di SASS.

Susy è molto versatile. Ha diversi tipi di griglia (demo). Ha anche diversi approcci: puoi andare su content first dichiarando la larghezza di una singola colonna e lasciando che Susy aggiusti il ​​numero di colonne in modo che corrisponda alla larghezza della finestra. Oppure puoi dichiarare quali numeri di colonne corrispondono a quale larghezza della finestra e lasciare che Susy regoli di conseguenza le larghezze delle colonne.

Susy consente di ottenere ciò che Frameless suggerisce, ma fornisce anche tutti gli strumenti necessari. Essendo tecnicamente diversi, Susy condivide la stessa idea: iniziare con una piccola griglia per i telefoni cellulari e ingrandirla man mano che lo schermo si ingrandisce. Questo demo illustra due di questi passaggi: inizia con 7 colonne ma passa a 12 colonne se la larghezza dello schermo suggerisce.

Qui ho creato un sito Web che utilizza Susy per allungare in cinque passaggi: http://am-teh.ru Puoi vedere il codice dietro il layout di questo sito (e anche l'evoluzione del suo concetto) in questo StackOverflow post. Lo sviluppatore di Susy ha commentato positivamente.