10 fragmente utile de cod de grilă CSS

Specificația grilei CSS nu este tocmai „nouă”, dar este cu siguranță mai nouă în lumea dezvoltătoarelor mainstream. Mulți codificatori de front-end nu știu încă despre proprietățile grilei CSS, darămite cum se aplică la o interfață.

Puteți găsi o mulțime de tutoriale căutând în jur, dar vă recomand să studiați și fragmentele de cod. În acest fel, vă scufundați în proiecte din lumea reală, astfel încât să puteți vedea cum funcționează grilele CSS pe o pagină web live.

Această colecție ar trebui să ofere o mulțime de resurse care să vă ajute să învățați, să personalizați și să remodelați grilele CSS pentru orice faceți pe web.

1. Bloc de eroi cu mai multe imagini

Să începem lucrurile cu acest bloc erou cu adevărat grozav conceput cu proprietăți de grilă. Acest design imită secțiunea de imagini eroi de pe pagina de pornire pe care o veți găsi pe multe site-uri web în stil reviste.

Dezvoltatorul Rachel Andrew a creat acest lucru folosind un pic de CSS personalizat din propriile proiecte. Funcționează incredibil de bine, iar designul răspunde pe deplin la pornire.

Ca să nu mai vorbim că arată fantastic pe ecranele mobile; nu este ceva ce găsești întotdeauna cu blocuri mari de imagini.

Aceasta este o resursă excelentă pentru studierea grilelor CSS și un fragment la îndemână pentru oricine care codifică o temă de blog în stil revistă.

2. Aspect grilă CSS

Proprietatea grid-auto-flow este afișată complet cu această demonstrație folosind setarea „dens”. Acest lucru forțează elementele să se strecoare mai jos în pagină pe măsură ce grila se redimensionează.

Cu această setare, aveți mult control asupra elementelor de pagină care își schimbă pozițiile, unde au loc acele modificări și cum ar trebui să răspundă grila. Acest lucru ocupă un loc în față față de interogările media care sunt utilizate în principal în designul receptiv.

Dacă nu sunteți sigur ce face acest cod, amintiți-vă: Google este prietenul tău! O mulțime de postări grozave și fire de discuție Stack Overflow care acoperă toată această configurație.

3. Fapte despre dovleac nu atât de înfricoșătoare

Iată un fragment destul de cool creat cu câteva fapte de bază despre dovleac. Ei bine, faptele dovleac organizate printr-un aspect al grilei CSS.

Codul rulează de fapt pe SCSS/Sass, ceea ce înseamnă că veți avea nevoie de o oarecare familiaritate cu limbajul pentru a explora. Dar puteți, de asemenea, să compilați codul Sass în CSS brut chiar în CodePen, dacă doriți să vedeți proprietățile de bază.

Unul dintre lucrurile mele preferate la acest design este culoarea și tipografia. Chiar țipă Halloween cu pictograma dovleac și toate acele nuanțe de galben/portocaliu.

4. Dispoziție hexagonală automată

Acesta este poate unul dintre cele mai practice proiecte pe care le-am găsit pentru această galerie. Aruncă o privire la acest stil de grilă și încearcă să redimensionezi browserul.

Veți observa că elementele în formă hexagonală se reformatează pentru a se potrivi în pagină în consecință. Acesta este probabil cel mai bun mod de a gestiona pagini complexe cu o mulțime de fotografii. Văd adesea acest tip de layout pe site-urile web de conferințe și pe paginile „despre noi” pentru companiile cu mulți angajați.

Acum, cu structura grilă CSS, nu trebuie să vă faceți griji cu privire la stilurile de răspuns manuale. Și acest fragment de cod este cel mai bun loc de a începe pentru a planifica un aspect similar.

5. Pokedex în CSS Grid

Încă nu am văzut nimic la fel de creativ ca acest Pokedex într-o grilă CSS. Se bazează pe HTML și CSS cu puțin JavaScript pentru completarea automată a dimensiunilor celulelor.

Pe măsură ce redimensionați pagina, veți observa că grafica în sine crește în dimensiune. Acest lucru este al naibii de ușor de gestionat cu CSS și este chiar mai ușor odată ce înveți unele dintre proprietățile grilei.

Rețineți că nu este interactiv, așa că nu puteți face clic pe nimic sau nu puteți deschide pagini noi. Dar, cu fundația de aspect așezată în piatră, ar fi destul de simplu să adăugați aceste caracteristici.

6. Grilă simplă

Iată o idee cu adevărat interesantă care aduce stiluri de design de imprimare pe web. Aruncați o privire la acest exemplu pe CodePen, care prezintă multe coloane cu anteturi și tipografie supradimensionată.

Aspectul grilei în sine se bazează pe coloane setate cu goluri predefinite. Aceasta înseamnă că, pe măsură ce redimensionați browserul, anumite coloane se descompun conform acestor reguli.

Este o modalitate excelentă de a vă asigura că anumite coloane apar întotdeauna una lângă alta, sau cel puțin apar în vedere, astfel încât să fie ușor de citit.

7. Grilă CSS cu Flexbox Fallback

Nu toate browserele au ajuns la nivelul structurii grilei CSS. De aceea, acest fragment vă învață cum să proiectați o grilă CSS personalizată folosind flexbox (și floats) ca alternativă.

Acest lucru este de fapt dificil, deoarece doriți să utilizați proprietățile grilei dacă sunt acceptate, dar doriți ca browserul să le ignore dacă nu. Din fericire, codul este bine comentat, astfel încât să puteți căuta și chiar să încercați să ajustați unele dintre funcții pentru dvs.

Nu aș numi asta o soluție de rezervă perfectă, dar este cu siguranță mai bună decât nimic.

8. Demo de terminologie grilă

Nu sunteți sigur de toată această terminologie confuză pentru grila CSS? Atunci acest fragment poate ajuta la clarificarea lucrurilor.

Dacă cercetați acest exemplu, veți găsi câteva caracteristici evidențiate cu scrieri care explică grilele pe parcurs. Veți învăța, de asemenea, cum să priviți corect liniile de grilă și cum să vedeți grilele CSS cu precizie pe pagină.

Rețineți că nu veți aduna totul din acest demo, deoarece nu acoperă totul. Este doar o mică introducere a celor mai ușoare proprietăți cu ajutorul vizual.

9. Folosind grid-template-colons: repeat()

Pentru un exemplu foarte specific al proprietății grid-template-columns, aruncați o privire la această demonstrație live. Vă arată cum să utilizați funcția de repetare în loc să declarați aceeași valoare a coloanei de mai multe ori în CSS.

Din nou, suportul pentru browser încă ajunge din urmă cu acest lucru, dar majoritatea browserelor web moderne funcționează cu această tehnică.

Ca să nu mai vorbim că veți găsi o mulțime de comentarii în interiorul CSS pentru a vă ajuta să înțelegeți ce face acest lucru.

10. Cuvânt încrucișat cu grilă CSS pur

Pentru a încheia cu o notă amuzantă, aruncați o privire la puzzle-ul de cuvinte încrucișate CSS pur al lui Adrian Roworth. Acest întreg aspect nu este construit pe nimic altceva decât cod HTML și CSS, în special proprietățile grilei CSS pentru structura aspectului.

Ceea ce este și mai nebunesc este că poți introduce conținut în casetele de cuvinte încrucișate pentru a rezolva efectiv puzzle-urile. Cat de tare e asta!

Rețineți că acest lucru este destul de complex și este unul dintre puținele proiecte enumerate aici care nu este prietenos cu dispozitivele mobile. Dar este o dovadă a cât de departe am ajuns cu aspectul grilei pe web, așa că sper că vom vedea mult mai multe din acest tip de lucruri în viitorul apropiat.