Creați un aspect receptiv cu grila CSS

Feb 13, 2026

să

CSS Grid Layout. este în creștere în suportul browserului în fiecare zi și putem trimite grilă CSS la producție. Adoptarea rapidă a rețelei CSS a fost cu adevărat remarcabilă.

Înainte de a ajunge la aspectul unui aspect de portofoliu receptiv, cu grilă CSS, să clarificăm câteva lucruri în sus: Grid CSS nu este un înlocuitor pentru Flexbox . Nu este nici măcar un înlocuitor pentru flotoare. De fapt, s-ar putea să vă dați seama că am folosit Flexbox pentru a face lucrurile pe care grila CSS o face mult mai bună. Dar în loc să se gândească în termeni de înlocuire, putem gândi în ceea ce privește combinația.

15 Tutoriale utile utile responsabile de design web

Imaginați-vă un unt de arahide și un sandwich de jeleu. Untul de arahide și jeleu sunt destul de mari pe cont propriu, dar când se întâlnesc, se naște un nou lucru și se întâmplă magia.

Aceasta este ceea ce noi Layout-ul site-ului sunt ca instrumente. Ele sunt minunate la lucrurile pe care le fac în mod individual, dar când sunt combinate, se întâmplă magie și putem crea layout-uri noi și interesante. În acest caz, vom face o dezvoltare web PB & Amp; J din propria noastră grilă CSS și Flexbox. Doriți să vă simplificați procesul chiar mai departe? Alegeți un decent Builder de site-uri web .

01. Configurați marcajul dvs.

case study title repeated — Aspectul nostru nu arată prea mult, dar scheletul cu cele șase elemente noastre este în vigoare

În acest tutorial, vom folosi GRID CSS și Flexbox împreună pentru a crea un aspect de portofoliu receptiv. Fiecare dintre aceste casete este o dimensiune diferită, unele dintre ele se întind pe rânduri și fiecare cutie are un titlu care stă în fund. Vom folosi unele dintre mari instrumente de aliniere care vin cu Flexbox pentru a face acest lucru.

Să începem prin stabilirea marcajului nostru.

 & lt; ul clasa = "cutii" & gt;
  & Li & gt;
    & lt; div Clasa = "Boxes__Text-wrapper" & gt;

Vom duplica acel element de listă și totul în el de șase ori, astfel încât să avem obiecte pentru a juca. În cazul în care vă întrebați, am decis să folosim Ul. element aici pentru că aceasta este o listă de intrări. Simțiți-vă liber să utilizați ceea ce vă simțiți bine.

În interiorul elementului de listă avem a div cu clasa de .boxes__text-wrapper care va conține titlul studiului de caz și descrierea acestuia însoțitoare.

02. Scrieți stilurile de bază

case study title with different styling — Ne-am stabilit fontul la ceva mai plăcut și am eliminat marja implicită din titluri și paragrafe

Acum, să punem niște stiluri de bază pentru a lucra.

 corp {
  Font-Family: Avenir, Sans-Seif;
  Marja: 2rem auto;
  Lățime: 95%;
}
H2,
p {
  Marja: 0;
}
ul {
  lista de stil: Nici unul;
  Padding: 0;
  Marja: 0;
}
.boxes & gt; * {{
  padding: .5rem;
  Culoare de fundal: # 333;
  culoare albă;
}

Am schimbat fontul să fie Avenir. Vom elimina marja de la poziția noastră și paragraf și vom reseta lista neordonată. De asemenea, vom da fiecare element de listă câteva stiluri implicite pentru a ne ajuta să vedem unde este fiecare.

03. Configurați grila

case study title with gaps between them — Cu doar trei linii, am adăugat un jgheab între elementele noastre de rețea și le-am făcut un pic mai înalt

Vrem să ne construim primul aspect pentru telefonul mobil. Configurarea rețelei noastre pe ecrane mici este la fel de ușoară ca aceasta:

 .boxes {
  Afișaj: grilă;
  Grid-Auto-Rows: Minmax (125px, Auto);
  Grid-gol: .5rem;
}

Grilă ne va stivui obiectele noastre în partea de sus unul de celălalt, deoarece în mod implicit există o singură coloană. Vom crea un spațiu între fiecare studiu de caz prin utilizarea Grid-Gap. - Acest lucru ne permite să adăugăm un jgheab între rânduri și coloane.

Uitați adăugarea unei marje la coloane numai pentru a avea nevoie de complex nth-copil selectori; Gutters apar numai între coloane sau rânduri, niciodată după sau înainte de o coloană sau Row.Grid-Gap. este stenografia lui Grid-coloană-decalaj și Grid-Row-Gap . De obicei, am folosi Longand, dar vom suprascrie atât ca browserul crește, așa că vom folosi stenografia.

Apoi, vom folosi Grid-Auto-rânduri Pentru a spune containerul nostru de grilă înălțimea unor noi rânduri. Grila va crea noi rânduri pentru a plasa tot conținutul nostru. Putem controla dimensiunea acestor rânduri create automat cu Grid-Auto-rânduri proprietate. Folosim o nouă funcție disponibilă pentru noi: minim maxim() . Cu minim maxim() Putem specifica o dimensiune minimă și o dimensiune maximă.

Cu codul nostru spunem că dorim ca rândurile noastre să fie un minim de 120px și un maxim de auto. Folosim auto aici pentru că vrem ca rândurile noastre să crească dacă conținutul o justifică.

04. Configurați compatibilitatea browserului mare

case study title in a row — Grila noastră se formează! Avem șase coloane pentru a lucra cu și mai puțin jgheab între elementele noastre de rețea

Să ne confruntăm pe pagina noastră, astfel încât atunci când browserul nostru este 40EM sau mai mare, containerul nostru de rețea are șase coloane de o fracție fiecare.

 @Media ecran și (min-lățime: 40em) {
  .cutii {
    Grid-șabloane-coloane: Repetați (6, 1fr);
    Grid-gol: 2px;
  }
}

Grid-șablon-coloane Proprietatea pe care o folosim pentru a spune grila noastră câte coloane ar trebui să existe. Acceptă toate unitățile de lungime pe care le cunoaștem și iubim cum ar fi REM. , ems. , px. , procente, VW. , vh. și fr. .

fr. Este o unitate nouă pe care o obținem cu aspectul griului CSS. Cu ea, putem spune browserului să facă matematică în loc de noi - excelent.

Spunând browserului să creeze șase coloane de o fracțiune, browserul va calcula lățimea recipientului de rețea și o împărtășită în șase coloane egale. De asemenea, deoarece grila este inteligentă, va împărți doar spațiul rămas după calcularea jgheabului pe care l-am specificat.

05. Elemente individuale în stil

case study title with an image behind — Cafeaua face ca totul să arate mai frumos, nu-i așa? De asemenea, gradientul subtil face ca titlul și descrierea să iasă în evidență

Studiile de caz caută un pic drab ca doar cutii gri. Să adăugăm o imagine de fundal, să obținem titlurile noastre să afișeze în partea de jos a acestor casete și să adaug un gradient, astfel încât titlul nostru să se evidențieze.

 .boxes Li {
  imagine de fundal:
    linear-gradient (RGBA (0,0,0,0), RGBA (0,0,0,0,8)),
    URL (calea / to / imagine);
  Dimensiune de fundal: acoperire;
  Afișaj: Flex;
  Aliniere: Flex-capăt;
}

Această imagine de fundal a fost o imagine gratuită de la Unsplash. , dar nu ezitați să utilizați oricare imagine pe care doriți. De asemenea, aduc Flexbox în amestec pentru a alinia textul nostru în partea de jos a cutiilor noastre. Nu veți vedea asta încă, dar pe măsură ce plasăm fiecare cutie diferită, o veți vedea în cele din urmă să funcționeze.

06. Plasați elemente pe grilă

case study title with one image above and five below — Gridul facilitează dimensiunea obiectelor noastre de rețea, totuși am dori. Dar acesta este doar începutul

Din păcate, grila nu are o modalitate de a pune automat elemente în aspectul rețelei pe care l-am văzut la început. Din fericire pentru noi, totuși, grila ne dă instrumentele pentru a face acest lucru manual destul de ușor. În acest tutorial, vom folosi Nth-copil pentru a plasa fiecare element de listă. Într-un site de producție, am sfătui să folosim o clasă care, având în vedere planificarea corectă, ar putea face posibilă automatizarea layout-urilor ca aceasta într-un loc greu de conținut.

Să începem cu primul nostru articol.

 @Media ecran și (min-lățime: 40em) {
  .boxes Li: Nth-copil (1) {
    Grid-coloană: 1 / -1;
    Grid-Row: Span 3;
  }
}

Vom pune toate stilurile noastre de plasare în interiorul acestei interogări media pe care le-am scris mai devreme pentru că dorim ca acest aspect să se întâmple după ce browserul nostru este 40em sau mai mare. Cu nth-copil Vom vizita primul element de listă. Gridul CSS ne permite să punem cu ușurință articolele cu coloană de rețea și la grătar. Există multe modalități diferite de a specifica unde ar trebui să fie elementele, dar aici le spunem elementului nostru să înceapă la linia de coloană și să cuprindă întregul recipient cu -1.

Apoi, cu Rândul de rețea, spunem elementului să cuprindă trei rânduri. Cum știm că trei rânduri vor fi dimensiunea pe care o dorim? Ei bine, am specificat dimensiunea acestor rânduri cu Rânduri de rețea cu câteva momente în urmă și dacă nu suntem mulțumiți de ei, putem schimba dimensiunea minimă.

Să punem restul articolelor noastre.

@Media ecran și (min-lățime: 40em) {
  .boxes Li: Nth-copil (2) {
    Grid-coloană: Span 2;
    Grid-Row: Span 7;
  }

  .boxes Li: Nth-copil (3) {
    Grid-coloană: Span 4;
    Grid-Row: Span 3;
  }

  .boxes Li: Nth-copil (4) {
    Grid-coloană: Span 2;
    Grid-Row: Span 4;
  }

  .boxes Li: NTH-COPIL (5),
  .boxes Li: Nth-copil (6) {
    Grid-coloană: Span 2;
    Grid-Row: Span 2;
  }
}

Nu este uimitor cât de mult ne oferă aspectul rețelei de control? Cu doar câteva linii de cod, putem pune împreună un aspect complet receptiv care nu se va rupe dacă se adaugă mai multe elemente.

Sigur, ar putea să arate un pic de vânător, pentru că vor lua doar o coloană și un rând de grilă în mod implicit, dar nu ne sparge aspectul. Dacă făceam asta cu flotoare și lățimi fixe și înălțimi, ne-am lega dacă ar fi adăugat mai mult conținut.

finished layout with different images in different places — Layout-ul nostru finalizat! Nu este acest uimitor? Grid ne permite să punem obiectele noastre cu ușurință în două dimensiuni

O parte repede despre browserele mai vechi

Ok, este timpul să abordăm elefantul din cameră. "Ce zici de browserele mai vechi? Răspunsul la această întrebare este același lucru cu orice caracteristică nouă în CSS: Utilizați instrucțiunile de utilizare și îmbrățișați cascada. Instrucțiuni sunt Foarte bine sprijinit și unde nu putem plasa mai întâi căderea noastră. De exemplu, am scrie ceva de-a lungul liniilor:

 .Your-selector {
  Afișaj: Flex;
}

/ * Codul de rețea * /
@supports (Afișaj: grilă) {
  Afișaj: grilă;
  Grid-șablon-coloane: repetați (3, 1fr);
  Grid-gol: 1rem 2rem;
}

Scrierea codului nostru în acest mod înseamnă că, dacă browserul înțelege aspectul rețelei, acesta va folosi acest lucru în loc de Flexbox. De asemenea, pentru că îmbrățișăm cascada, browserele care nu înțeleg interogările caracteristice le vor ignora și au deja informațiile de care au nevoie. S-ar putea să trebuiască să planificăm cum ne scriem stilurile noastre puțin mai mult decât de obicei, dar făcând acest lucru putem crea layout-uri de mare aspect cu refaceri sensibile. Dacă doriți să salvați paginile vechi, să le exportați ca PDF-uri și să le salvați în Stocare in cloud .

De asemenea, pe măsură ce timpul continuă, va exista doar mai mult suport pentru grila CSS. Gândiți-vă cât de mare ar fi să ștergeți mai târziu căderile noastre și să lăsăm toate CSS legate de rețea. Pe măsură ce aflați mai multe despre rețea, veți realiza că face multe lucruri pe care le facem acum cu multe linii mai mici de CSS. Amintiți-vă, dacă aveți un site deosebit de complex, dvs. web hosting Serviciul trebuie să fie de până la zero.

Acest articol a apărut inițial în revista netă , Magazine de conducere din lume pentru dezvoltatori și designeri de web. Abonați-vă aici .

Citeste mai mult:

Secretele de aspect ale rețelei CSS au arătat
30 de instrumente de design web pentru a accelera fluxul de lucru
Layout-uri flexibile de moda cu grila CSS

Creați un aspect receptiv cu grila CSS

01. Configurați marcajul dvs.

02. Scrieți stilurile de bază

03. Configurați grila

04. Configurați compatibilitatea browserului mare

05. Elemente individuale în stil

06. Plasați elemente pe grilă

O parte repede despre browserele mai vechi

să - Cele mai populare articole

Cum să atragă un câine

Cum de a juca Photoshop într-o imagine

Creați un efect de aberație cromatică

Cum se proiectează figuri grafice

4 sfaturi pentru a îmbunătăți performanța paginii dvs.

Construiți aplicații care funcționează offline

Ascuți abilitățile voastre de viață în continuare

Boost d3.js diagrame cu gradienți SVG

Categorii