2011-03-16 10 views
19

Mi tuffo nello sviluppo del web e sto giocando con il framework Blueprint CSS, che include un sistema di grid, e ho alcune domande.Qual è il punto di grondaia nei quadri griglia CSS?

  1. Qual è il punto di grondaie? Sicuramente non sono abituati a includere lo spazio tra le colonne perché puoi semplicemente usare la proprietà CSS margin per quello, giusto? O le grondaie sono solo un modo elegante per gestire i margini?
  2. Non voglio alcuno spazio tra le mie colonne e vorrei generare un layout di griglia che non includa grondaie, ma tutti gli strumenti di generatore mi impediscono di avere grondaie a larghezza zero. Perché?
  3. Appare the suggested Blueprint CSS generator non è più supportato. Qualcuno può suggerire un generatore di Blueprint CSS per modificare la griglia per includere grondaie a larghezza zero?

Grazie mille per la tua saggezza!

+0

I generatori che non consentono ogni input possibile sono quelli che non uso. –

+0

@Radek S, quindi in altre parole non usi i generatori? –

+0

@Solo hai ragione :) –

risposta

19

La motivazione dietro un sistema Grid CSS è di automatizzare completamente il layout. I grondaie sono solitamente desiderabili perché lo spazio bianco tra le colonne rende la leggibilità migliore, quindi ha senso includerli come parte dell'automazione.

La ragion d'essere di un Generatore è per sollevarti dai calcoli un po 'noiosi necessari per implementarli, ma senza le grondaie la matematica e il css non sono affatto complicati.

Dovrebbe essere molto semplice eseguire una griglia senza griglia senza generatore. per esempio.

(column width X nº of columns) + left margin + right margin = content width 

.span-1 {width:100px} 
.span-2 {width:200px} 
.span-3 {width:300px} 
.span-4 {width:400px} 

etc... 
+14

+1 per la ragion d'essere – Ryan

+2

Sento che questa risposta non soddisfa pienamente la domanda n. 1 dell'op. Le grondaie sono gestite tramite margine o no? –

+1

@ E.E.33 come dice bigmattyh: "Gutters non ha assolutamente nulla a che fare con i CSS di per sé ...". Le proprietà CSS utilizzate per crearle sono implementate. –

8

Gutters non ha assolutamente nulla a che fare con i CSS di per sé. Sono un concetto di design dalla stampa editoriale - hanno lo scopo di fornire spazi bianchi tra le colonne, rendendo il contenuto più facile da leggere.

Le colonne senza grondaie sono molto facili da calcolare. Basta impostare la stessa larghezza in pixel per ogni colonna.