Cum se creează un aspect de card utilizând aspectul grilă CSS

Nota editorului: această postare pentru invitați a fost scrisă de Abbey Fitzgerald, un inginer software UX și designer web care iubește arta de a crea cod.

Aspectele grilă CSS schimbă modul în care lucrează designerii web, permițând un mod mai eficient de aranjare a conținutului site-ului web.

A fost mult așteptat, dar în cele din urmă această abordare a decolat cu adevărat și, în multe cazuri, este în producție. A revoluționat modul în care sunt proiectate site-urile web și, odată ce designerii se pricep la el, va oferi mai multă flexibilitate aspectului web.

Dacă ați încercat să proiectați cu CSS Grid și ați consultat tutoriale pe web, este posibil să fi găsit informații care se referă la o abordare generală a aspectului. Lucruri precum: antet, conținut, subsol etc.

Cu toate acestea, CSS Grid poate fi utilă și pentru alte detalii ale site-ului web, cum ar fi cardurile. Aspectele cardurilor sunt o modalitate obișnuită de afișare a conținutului și pot fi create eficient cu CSS Grid. Prin utilizarea acestei metode, zonele de conținut ale cardului sunt ușor de repetat, pot fi vizualizate pe multe tipuri diferite de dispozitive, iar dimensiunea este ușor de controlat.

Instrumente de aspect al grilei CSS

Pe măsură ce mergeți mai departe, veți dori să inspectați lucrurile de pe pagină. Firefox are instrumente excelente pentru dezvoltatori pentru a vedea zonele de grilă. Folosind instrumentele pentru dezvoltatori Firefox, puteți vedea o suprapunere care conturează grila. Firefox Developer Edition are și această capacitate.

Selectați grila de suprapunere pe care doriți să o afișați (în funcție de designul dvs., pot fi mai multe). Setările de afișare a grilei vă permit să aruncați o privire mai atentă, afișând numărul liniilor, numele zonelor și modul în care doriți să se extindă liniile. Acest lucru va fi util pe măsură ce proiectați.

Carduri simple cu aspect grilă CSS

Dacă sunteți nou la CSS Grid, veți dori să perfecționați elementele de bază și să creați un aspect simplu CSS Grid. Cardurile sunt o modalitate excelentă de a afișa conținut, precum și un element de interfață de utilizare interesant, care este intuitiv de utilizat. Ele oferă, de asemenea, un format grozav pentru ca utilizatorii să scaneze rapid conținutul și să interacționeze cu ceea ce îi interesează cel mai mult. Cardurile permit, de asemenea, designerilor să formateze conținutul într-un mod atrăgător din punct de vedere vizual, cu imagini grozave, conținut introductiv, link-uri și multe altele!

Carduri și aspect general al paginii

În afară de aceasta, este important să știți că Grila CSS nu trebuie să fie utilizată pe un aspect al întregii pagini. Grilele pot fi folosite în anumite zone ale paginii dacă este necesar. Deoarece acesta este un tutorial despre aspectul cardurilor, o abordare grilă poate fi utilizată exclusiv aici, chiar dacă restul paginii nu utilizează Grila CSS. Atâta timp cât zona grilei este definită și display: grid; este declarată pe ambalaj, această abordare poate fi utilizată.

Lucrul cu un număr stabilit de carduri

În unele cazuri, este ușor să planificați un anumit număr de carduri. Cu o cantitate stabilită de conținut, numărul de carduri va rămâne același. De exemplu, pot exista patru carduri care explică ofertele de afaceri, fiecare ofertă fiind pe propriul card.

Pentru acest exemplu (și celelalte), toate elementele .card sunt în interiorul unui element container .cards . Pentru a realiza acest lucru, este destul de simplu.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Este important să afișați valoarea .cards to grid. Fără aceasta, zonele de grilă nu pot fi create. Următorul pas este definirea grid-template-columns și alegerea stilului. Stilul efectiv al cardului va fi declarat cu o clasă de .card .

În acest exemplu, veți vedea mai multe etichete de articol cu ​​clasa .card . Vezi pe Codepen.

Repetați pentru a seta numărul de carduri

Aici încep să prindă contur cărțile. Pentru a crea o cantitate fluidă de coloane pe rând, repetarea este utilizată cu funcția repeat() . Această funcție are două argumente: numărul de ori de repetat și valoarea de repetat.

De exemplu, grid-template-columns: repeat(3, 200px); calculează la grid-template-columns: 200px 200px 200px; .

Unitate fracțională

Veți vedea că exemplul de cod folosește un „fr”. Ce este asta mai exact? Această unitate de măsură a devenit populară cu CSS Grid. Fr înseamnă „unitate fracțională”, iar 1fr ocupă 1 parte din spațiul disponibil. Ajută la simplificarea calculelor de spațiu.

Unitățile fracționale pot fi folosite singure sau vă permit să specificați o lățime de 1fr și puteți adăuga și elemente copil. Mai multe fr vor fi partajate în mod egal între toate elementele secundare.

Pot fi specificate diferite unități fracționale. De exemplu, când coloanele de grilă sunt 1fr 2fr 1fr , două unități fracționale ocupă de două ori spațiul ca o unitate fracțională.

Repetați pentru un număr dinamic de carduri

În unele cazuri, este posibil să nu știți numărul de carduri necesare, așa că planificarea unui număr stabilit nu va funcționa. Aceeași abordare va fi adoptată ca și cu repetarea, dar există opțiunea de a potrivi cât mai multe sunt necesare cu completare automată.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Pe lângă auto-fill sunt necesare declarații de lățime. În minte, cu o valoare px, este posibil să existe spațiu în partea dreaptă atunci când nu este suficient pentru a încăpea cardul, dar nu trebuie să fie cazul, așa cum veți vedea puțin mai târziu.

Minmax pentru mai mult control asupra lățimii cardului

Minmax este soluția perfectă, deoarece o unitate fracțională de la sine ar face cărțile lățime întreagă. Adăugarea atât a repetiției cât și a unui minmax la declarația de stil va scăpa de posibilul spațiu gol și cărțile vor apărea mai fluide.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Coloanele se vor potrivi întotdeauna în grilă, iar cardurile vor avea cel puțin 200 de pixeli. Atunci când spațiul minim nu se potrivește perfect spațiului, aici intervine lățimea maximă. Când un alt card cu lățime de 200 de pixeli nu se potrivește, celelalte carduri vor fi mai mari de 200 de pixeli, așa că se întind pentru a umple rândul cu mai mult spațiu și va fi distribuit în mod egal. [ID articol=”21612″ align=”dreapta”]

Mobil

Deoarece au fost planificate cele mai mici și mai mari carduri, acesta este un moment bun pentru a vorbi despre mobil. Cardurile funcționează bine pe dispozitive mai mari și mai mici, deoarece conținutul este în bucăți digerabile, iar cardurile se pot scala cu ușurință în sus și în jos. Grila CSS ajută la crearea unei experiențe mobile grozave și, în unele cazuri, este mult mai ușor decât a avea o interogare media separată.

În acest exemplu, cardurile trebuie să fie dimensionate mai mic pentru a se potrivi în mobil și să fie mai mari pentru a fi o fracțiune din spațiul disponibil, astfel încât să apară la lățime completă pe un dispozitiv mai mic, nu este nevoie de interogare media separată:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

Lățimea minimă a cardului este de 300 px. Pe rând vor apărea cât mai multe carduri de 300 de pixeli care pot încăpea. Când dispozitivul este foarte mic, există șanse mari să nu existe spațiu disponibil pentru două cărți la rând. Atunci intră în joc 1fr . Unitatea fracțională este excelentă pentru modele receptive. Când două dintre cardurile de 300 px nu se potrivesc, aici devine foarte evidentă vizualizarea pe mobil. Când 1fr a fost declarat ca lățime maximă, o singură carte va ocupa tot spațiul disponibil și se vor stivui una peste alta.

Grid Gap

Acum că lățimea cărților este stabilită, trebuie luată decizia de a avea spațiu între ele. Această proprietate este disponibilă pe containerele cu grilă și facilitează crearea jgheaburilor în design. Grid-column-gap creează spațiul dintre fiecare card. Când vedeți grid-gap , aceasta se referă la prescurtarea pentru grid-row-gap și grid-column-gap . Grid-row-gap este spațiul din partea de sus și de jos a cardului, grid-column-gap este spațiul din stânga și dreapta cardului.

Resurse de aspect al grilei CSS

Când vine vorba de CSS Grid Layouts, există multe de învățat și există multe posibilități. Cel mai bun mod de a învăța despre aspectul grilă CSS este să faci câteva citiri și experimente suplimentare. Există multe resurse grozave, dar iată câteva pentru a începe:

• Grilă după exemplu
• Curs CSS Grid Layout de la Wes Bos
• Mozilla Introducere la CSS Grid