Share
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
Ciao. Mi chiamo Cory. Ho un po 'di ossessione. Sono stato dipendente dai sistemi di rete per anni. In effetti, ho contribuito a creare uno molto popolare chiamato Jeet. Ho sempre amato la matematica coinvolta nello spaziatura delle cose in modo appropriato.
Penso che tutti possiamo essere d'accordo sul fatto che le griglie fisse hanno fatto la fine del dinosauro a favore delle griglie fluide, ma c'erano sempre cose che mi infastidivano delle reti fluide. Ad esempio, non c'è modo di avere una grondaia in alto e in basso che abbia le stesse dimensioni di una grondaia a sinistra ea destra. Seriamente, provalo.
E non c'è modo di nidificare indefinitamente senza passare una sorta di contesto insieme alla tua spaziatura. Ad esempio, in Jeet, devi digitare colonna (1/3 1/2) dove 1/2 è la dimensione dell'elemento contenitore. Questo diventa piuttosto peloso quando lo hai annidato tre o quattro volte e hai le dichiarazioni che assomigliano colonna (1/4 1/3 1/2 1/2). Che schifo. Non è solo Jeet, ogni sistema di grid basato sul preprocessore ha questo problema.
E Bootstrap? Non farmi iniziare su quanti elementi extra hai bisogno nel tuo markup solo per far funzionare il tuo sistema di grid-è soggetto a errori se non altro. O il fatto che hai bisogno di più elementi nel tuo markup se vuoi impostare i colori di sfondo sugli elementi. Ecco un esempio di questo piccolo problema sotto forma di galleria.
Argh! Persino Flexbox non sembra offrire nulla di nuovo se non un modo conveniente per centrare verticalmente le cose.
Dopo quel giro vorticoso su cosa c'è di sbagliato con le griglie oggi, cosa dovrebbe fare un ossessivo della griglia?
Possiamo usare Calc () all'interno del nostro CSS, quindi cosa fa?
"Con calc (), è possibile eseguire calcoli per determinare i valori delle proprietà CSS." - MDN
Non solo, ma possiamo combinare unità con calc! Ciò significa che se vogliamo che una griglia abbia quattro colonne per riga con una gronda 20px tra di esse, possiamo scrivere una combinazione di valori percentuali e pixel come larghezza: calc (25% - 20px). Quanto è fantastico?
Ecco alcune immagini del gattino markup-seven all'interno di un contenitore sezione:
Quindi applichiamo alcuni stili alle immagini:
img float: left; larghezza: calc (25% - 20px); margine: 10px;
Questo assicura che ogni immagine sia esattamente del 25% della larghezza del suo genitore, meno 20px da cui è possibile lasciare la nostra grondaia a sinistra ea destra. Un margine di 10px tutto intorno quindi colloca l'immagine perfettamente centrata all'interno della "colonna".
Quattro colonne di gattini Nota come la spaziatura in alto e in basso è uguale alla spaziatura a sinistra ea destra? Bellissimo.
Analizziamo questo un po 'di più per quelli di noi che preferiscono visualizzare il calcolo in modo diverso: larghezza: calc (100% * 1/4 - 20px);
Ancora una volta, questo ci dà quattro colonne perfette con gronda 20px. Possiamo anche utilizzare le query multimediali per modificare il numero di colonne in base alla larghezza della finestra:
img float: left; margine: 10px; larghezza: calc (100% * 1/4 - 20px); @media (larghezza massima: 900px) img larghezza: calc (100% * 1/3 - 20px); @media (larghezza massima: 600px) img larghezza: calc (100% * 1/2 - 20px); @media (larghezza massima: 400px) img larghezza: calc (100% - 20px);
Anni di ossessione completamente cancellati da questa bellissima e piccola regola CSS. Sistemi di griglia di addio. Ciao calc.
Non sarebbe giusto concludere questo breve tutorial senza farti sapere dove e quando puoi usare Calc (). I soliti sospetti stanno giocando a catch-up (IE9 è quasi arrivato, ma ignora Calc () quando display: table viene usato). Tuttavia, guardando avanti questo è uno strumento CSS molto potente.
Dai un'occhiata a http://caniuse.com/#feat=calc per maggiori dettagli.
Accentsconagua
