Când oamenii se gândesc la CSS Grid, în mod normal, imaginează aspectul grilei de imagini și pagini web complete. Cu toate acestea, CSS Grid este de fapt o tehnologie excelentă și pentru prezentarea articolelor, deoarece vă permite să faceți lucruri care anterior erau dificil de realizat.

În acest tutorial, voi explica cum să recreați faimosul aspect al articolului mediu folosind CSS Grid.

Notă: De asemenea, am făcut parte din crearea unui curs gratuit de 13 părți CSS Grid la Scrimba. Obțineți acces la curs aici.

Faceți clic pe imagine pentru a ajunge la cursul complet al grilei CSS.
Clic aici pentru a ajunge la cursul complet CSS Grid.

La curs, colega mea Magnus Holm va trece prin modul de creare a unui aspect de articol folosind CSS Grid. Deci, dacă preferați să vizionați în loc să citiți, asigurați-vă că verificați screencast-ul său.

Continutul

Vom începe cu un fișier HTML de bază, care conține tipul de conținut pe care îl veți găsi de obicei într-un articol mediu. De exemplu titlu, paragrafe, subtitrări, imagini, ghilimele și așa mai departe. Iată un outtake:

<article>

<h1>Running any NPM package in the browser locally</h1>

<p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years, NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.</p>

<blockquote>

<p>Scrimba is a platform for interactive coding screencast where           
you can run the code at any moment in time.</p>

</blockquote>

<figure>

<img src="https://mave.me/img/projects/full_placeholder.png">

</figure>

Dacă deschideți acest fișier pe un site web fără a regla niciun aspect, acesta va arăta astfel:

Cum sa recreati aspectul articolului Medium cu CSS Grid

Nu deosebit de elegant. Deci, să o remediem cu CSS Grid. O vom face pas cu pas, astfel încât să vă fie ușor de urmat.

Configurare de bază pentru margini

Primul lucru pe care trebuie să-l facem este să transformăm întregul article etichetați într-o grilă și dați-i cel puțin trei coloane.

article {  
    display: grid;  
    grid-template-columns: 1fr 740px 1fr;  
}

Prima și ultima coloană sunt receptive și acționează ca margini. Ele vor conține spațiu alb în majoritatea cazurilor. Coloana din mijloc este fixată la 740 pixeli și va conține conținutul articolului.

Observați că nu definim rândurile, deoarece acestea vor fi pur și simplu la fel de înalte pe cât trebuie să fie pentru a se potrivi conținutului lor. Fiecare bloc de conținut din articol (paragraf, imagine, titlu) va primi propriul rând.

Următorul pas este să vă asigurați că tot conținutul din grilă începe în mod implicit de la a doua linie de coloană.

article > * {  
    grid-column: 2;  
}

Acum avem următorul rezultat:

1611527648 571 Cum sa recreati aspectul articolului Medium cu CSS Grid

Putem vedea instantaneu că acest aspect arată mai bine, deoarece spațiul alb de pe fiecare parte face textul mai ușor de citit.

Cu toate acestea, acest efect ar fi putut fi obținut la fel de ușor de utilizat prin setarea stânga și dreapta margin proprietate de auto. Deci, de ce să folosiți CSS Grid?

Ei bine, problema apare atunci când vrem să imităm caracteristicile imaginii lui Medium. De exemplu, crearea de imagini cu lățime completă, ca aceasta:

Cum sa recreati aspectul articolului Medium cu CSS Grid

Dacă am fi folosit margin: 0 auto acest lucru ne-ar fi forțat să aplicăm marje negative imaginilor pentru a le face să ocupe întreaga lățime a site-ului, ceea ce este dificil.

Cu CSS Grid, totuși, aceasta devine o bucată de tort, deoarece vom folosi pur și simplu coloane pentru a seta lățimea. Pentru ca imaginea noastră să ocupe întreaga lățime, îi vom spune doar să se întindă de la prima până la ultima linie de coloană.

article > figure {  
    grid-column: 1 / -1;  
    margin: 20px 0;  
}

De asemenea, am stabilit o anumită marjă în partea de sus și de jos. Și apoi avem o imagine frumoasă pe toată lățimea:

1611527650 703 Cum sa recreati aspectul articolului Medium cu CSS Grid

Extinderea cu mai multe coloane

Cu toate acestea, acest lucru nu ne ajută până la capăt, deoarece Medium are câteva alte machete de care trebuie să ținem cont. Să ne uităm la câteva dintre ele:

Imagini de dimensiuni medii

Aceasta este opțiunea de imagine între cea normală și cea cu lățime completă, pe care o vom numi a mijlocii unu. Se pare că:

1611527650 694 Cum sa recreati aspectul articolului Medium cu CSS Grid

NOTĂ: EuDacă vizionați pe mobil, această imagine este identică cu cea cu lățime completă. În acest articol, ne concentrăm doar pe aspectul desktopului.

Acest lucru va necesita cel puțin două coloane noi pentru aspectul nostru.

Citate

În plus, Medium plasează și un linie verticala în partea stângă a articolului dacă adăugați o ofertă:

← Observați linia verticală. Va trebui să adăugăm o coloană suplimentară la grila noastră din cauza acesteia.

Acest lucru necesită o coloană mică în partea stângă a grilei. Pentru a face lucrurile simetrice, vom adăuga și o coloană similară în partea dreaptă.

Deci, pentru a le susține pe amândouă citate și imagini de dimensiuni medii va trebui să împărțim întreaga lățime în șapte coloane în loc de trei, astfel:

article {  
    display: grid;  
    **grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;**  
}

Dacă folosim inspectorul Chrome, putem vedea de fapt liniile de grilă subiacente (vezi imaginea de mai jos). În plus, am adăugat indicii pentru a ușura recunoașterea diferitelor coloane.

Am adăugat indicii pentru a ușura recunoașterea diferitelor coloane.

Am adăugat indicii pentru a ușura recunoașterea diferitelor coloane.

Primul lucru pe care trebuie să-l facem pentru ca toate elementele implicite să înceapă de la a patra linie de coloană în loc de a doua.

article > * {  
    grid-column: 4;  
}

Apoi putem crea mijlocii imagine făcând:

article > figure {  
    grid-column: 2 / -2;  
    margin: 20px 0;  
}

Iată cum arată acest lucru cu inspectorul Chrome activat:

1611527651 850 Cum sa recreati aspectul articolului Medium cu CSS Grid

citate sunt create cu ușurință făcând următoarele:

article > blockquote {  
    grid-column: 3 / 5;  
    padding-left: 10px;  
    color: #666;  
    border-left: 3px solid black;  
}

O facem să se întindă de la a treia la a treia până la a cincea linie de coloană. De asemenea, adăugăm padding-left: 10px; astfel încât textul să pară să înceapă de la a patra linie de coloană (a treia coloană are și o lățime de 10 pixeli). Iată cum arată pe grilă.

1611527652 466 Cum sa recreati aspectul articolului Medium cu CSS Grid

Marcile laterale

Acum trebuie să susținem un ultim lucru. Medium are un mod destul de frumos de a semnaliza ce conținut din articol este cel mai evidențiat. Textul se transformă în verde și primește un Punct culminant pe partea dreaptă.

1611527652 734 Cum sa recreati aspectul articolului Medium cu CSS Grid

Punct culminant elementul text ar fi un coșmar de creat dacă am fi folosit margin: 0 auto; în schimb, dacă CSS Grid. Acest lucru se datorează faptului că elementul acționează diferit de toate celelalte elemente din articol. În loc să apară pe o nouă linie, să se afișeze în partea dreaptă a elementului anterior. Dacă nu am folosi CSS Grid, probabil că ar trebui să începem să ne jucăm position: absolute; pentru a face acest lucru să funcționeze.

Dar cu CSS Grid este foarte simplu. Vom face ca acest tip de element să înceapă pe a patra linie de coloană.

.aside {  
    grid-column: 5;  
}

Acest lucru îl va face automat să se plaseze în dreapta articolului:

Notă: nu am evidențiat textul în verde, deoarece nu are nimic de-a face cu CSS Grid.

Notă: nu am evidențiat textul în verde, deoarece nu are nimic de-a face cu CSS Grid.

Si asta e! Acum am recreat cea mai mare parte a aspectului articolului Medium folosind CSS Grid. Și a fost de fapt destul de ușor. Rețineți totuși că nu am atins răspunsul, deoarece acest lucru necesită un articol complet nou în sine.

Verifică acest loc de joacă Scrimba pentru a privi tot codul.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.