Aspect grilă CSS: înmulțiți și cuceriți - sau cum să proiectați efectiv folosind The Grid.

Puteți Urmați-mă pe Twitter pentru a obține tutoriale, sfaturi JavaScript etc.

Vom proiecta o structură receptivă folosind CSS Grid în acest tutorial. Și aici este o vedere a unei păsări de la ce să vă așteptați de la proces:

Pentru a vă face o idee bună despre modul în care funcționează flexul, încercați editorul de aspect flex pe această pagină.

Întreaga enchilada. Îmi place să postez conținutul de imagine pentru ochi de pasăre în sus pentru a economisi timp de derulare.

Cu dispozitive portabile independente de rezoluție, lucrurile s-au complicat. Acestea provoacă modificări chiar și regulilor clasice de design responsive, IM.

Așa că am pornit într-o încercare de a standardiza design-ul responsive, trecând prin toate posibilitățile de grilă CSS, cum ar fi un test IQ ... sau ceva ... Și acesta este primul meu tutorial din seria despre realizarea unor machete reale cu grila CSS.

Ceea ce am descoperit urmează.

Idei de bază în spatele diviziunii de coloane

Am încercat să-mi dau seama ce câștigăm de fapt din fiecare diviziune pe coloane.

Modelele cu o coloană ne ajută să punem tot conținutul nostru pe o listă lungă verticală.

Modelele din două coloane sunt potrivite pentru galeriile de imagine mini / tablete?

Modelele cu coloane arbore sunt primele de acest gen care oferă borduri (margini).

Modelele cu patru coloane funcționează bine ca galerii de imagini pe ecran complet.

Am observat dispuneri de coloane cu număr impar (≥ 1) pentru machete bazate pe granițe.

Hmm. ce zici de designul cu 5 coloane? Nu uitați că coloanele cu numere impare sunt adesea folosite pentru a crea chenare. Pentru că întotdeauna sfârșesc în 2 părți în plus.

Modelele în cinci coloane pot face un format de articol cu ​​un mediu destul de decent @.

Și pe tot restul acestui tutorial vom explora realizarea unuia!

Folosiți unități fr pentru a le face să se extindă așa cum v-ar face marginea: auto pe elemente obișnuite. Nu contează dacă este 1fr sau 2fr sau n-fr pentru borduri, atât timp cât conținutul principal este specificat folosind pixeli sau o valoare mare (r) fr (10fr, 20fr, etc):

Singura diferență este că Medium folosește 1000px pentru conținut larg și 700px pentru coloana principală a articolului. Dar ideea este aceeași.

Grila responsiva + Mobile Going

Până acum am creat schela primară. Dar ce zici de design receptiv?

CSS Grid face lucrurile mai ușoare decât crezi!

Tine minte:

conținut receptiv! = granițe responsive.

Cele două tehnici ar trebui tratate separat. Dar…

Adesea - ca în acest caz - este posibilă rezolvarea problemei conținutului receptiv prin rezolvarea problemei de graniță receptivă.

Dacă îți poți folosi creativitatea pentru a rezolva mai multe probleme folosind o tehnică ... cu atât mai bine.

Acestea fiind spuse, în acest caz, o putem rezolva pur și simplu schimbând benzile exterioare ale șablonului la 0,5 fr (cele violet și albastre.) Și ... de asemenea, schimbând fie spațiul, fie zonele șablonului pentru a se extinde în mai multe coloane, făcând spațiu larg de conținut. . (Zona roz de mai sus.)

Puteți face acest lucru prin interogări media sau JavaScript.

În cele din urmă ... schimbați banda principală (verde) la 10fr. (Puteți utiliza o valoare similară, dar ≥10 de obicei va funcționa bine.) Aceasta va scala automat banda principală (verde) la rezoluția curentă a ecranului. Deoarece ambele granițe sunt acum de 0,5, totul, inclusiv granițele și conținutul vor fi la scară corectă.

Dacă trebuie să eliminați complet marginile de 0.5fr, le puteți seta pe 0fr. Dar personal îmi place să am o frontieră minusculă pentru vizualizările mobile. Acest lucru face ca culoarea conținutului să arate mai bine în opinia mea

Going Mobile

Odată ce toți pașii de mai sus sunt urmați ... Când stoarceți într-un spațiu mai mic, ar trebui să ajungeți la așa ceva (mai sus).

Lecția învățată aici?

Încercați întotdeauna să găsiți soluția cea mai grațioasă. Adică, este curat, necomplicat și, dacă este posibil, rezolvă mai multe probleme aplicând o singură modificare (sau două.) Acest lucru nu este atât de greu pe cât ar putea suna.

  • Aceasta este singura soluție? Nu.
  • Este o soluție perfectă? Nu.
  • Dar rezolvă problema și funcționează - suficient.

Și acesta este un lucru bun pentru care trebuie să vizezi. Abordarea prezentată în acest tutorial este:

1. Mai plină de satisfacții și distracție
 2. Este respectabil.
 3. Te invită să înțelegi de fapt cum și de ce funcționează ceva.
 4. Este simplu. Prin urmare, creează un cod ușor de întreținut.
 5. Produce cod curat.
 6. Îți păstrează conștiința curată.

Vorbind despre care ... altfel ... s-ar putea să începeți codul de "piratare". (Încercați să rezolvați problemele prin încercare și eroare, de multe ori fără să înțelegeți cum funcționează de fapt.) Veți încerca lucrurile astfel. Și probabil chiar simți realizarea unor feluri. Dar ... nu va fi distractiv.

Editor de articole dinamice ca mediu?

Desigur, într-un editor de articole generat dinamic, va trebui să codificați coloanele cu conținut larg pentru a funcționa algoritmic. Nu știi niciodată ce combinație de text și conținut larg va dori să folosească autorul.

Pot fi aranjate în orice mod. Dar cred că folosind JavaScript și câteva ore din timpul dvs., este posibil să faceți un editor de articole generat dinamic (la fel ca cel mediu) schimbând zonele de șablon grilă așa cum este descris mai sus.

Puteți utiliza în continuare acest aspect (desigur) pentru articole statice simple dacă le proiectați singur de mână și știți dinainte ce tip de conținut urmează.

O alternativă non-grilă CSS pentru proiectarea articolelor de tip mediu?

Alternativa fără grilă CSS? Ei bine ... nu prea există diferență. Poate mai complex. Încă este algoritmic, dar termini să folosești elemente DIV obișnuite.

Noroc cu asta .

Cred că grila CSS simplifică procesul fără a sacrifica codul curat.

M-am uitat la pentru pagina mea de tutorial mediu. E dezordine.

Cuvinte finale

În primul rând, ca programator JavaScript, nu am fost niciodată bun la aspectele site-ului sau la aplicații. Mai ales după ce a venit epoca receptivă. Dar grila CSS mă inspiră să reconsiderez această sarcină evazivă.

Doar am avut nevoie să mi se arate instrucțiuni pas cu pas și exemple de aspect real din rețeaua CSS, astfel încât să pot începe să îmi fac singur.

Dar ... nu am găsit un singur tutorial online care să demonstreze acest lucru. Așa că am decis să-mi scriu propriul meu și să-l împărtășesc cu tine!

Este vorba doar de încercarea de a înțelege lucrurile în funcție de scopul propus.

Dacă petreceți timp pentru a cunoaște bine grila CSS, este ca să înșelați.

Mă face aproape să mă simt de parcă sunt mai bun în ceea ce privește aspectul aspectului decât sunt de fapt.

Trebuie să spun că sunt dependentă de grila CSS în acest moment și o voi folosi de acum înainte pentru a crea toate aspectele mele viitoare.

Sper că aceste idei simple te-au ajutat să te familiarizezi cu CSS Grid.

Pentru mai mult Freemium săptămânal ...

Poți să mă urmezi pe Twitter pentru cadouri PDF în weekend.

Urmărește-mă pe Instagram pentru o lovitură rapidă de JavaScript.

Mă poți urmări pe Facebook pentru chestii de codare gratuite.

Ofertă limitată

Diagramele din acest tutorial au fost influențate direct de manuscris!

CSS Visual Dictionary 28% OFF pentru cititorii medii.

28% reducere

Numai cititori medii:

Dicționar vizual CSS

== apucați o copie ==

Conține toate proprietățile CSS.