Kako ponovno stvoriti izgled članka Medij pomoću CSS Grid-a

Kad ljudi pomisle na CSS Grid, obično predviđaju izgled mrežne slike i pune web stranice. Međutim, CSS Grid je ujedno i vrhunska tehnologija za postavljanje članaka, jer vam omogućava da radite stvari koje je prije bilo teško postići.

U ovom će vam upute objasniti kako ponovo stvoriti poznati izgled Medium medija pomoću CSS Grid-a.

Napomena: I ja sam bio dio kreiranja besplatnog 13-dijelnog CSS Grid tečaja u Scrimbi. Pristupite tečaju ovdje.

Kliknite sliku da biste stigli do čitavog CSS Grid tečaja.

U toku će moj kolega Magnus Holm istražiti kako stvoriti izgled članka pomoću CSS Grid-a. Dakle, ako radije gledate umjesto da čitate, svakako pogledajte njegovu ekransku emisiju.

Sadržaj

Započet ćemo s osnovnom HTML datotekom koja sadrži vrstu sadržaja koji se obično nalazi u članku Medium. Na primjer: naslov, odlomci, podnaslovi, slike, navodnici i tako dalje. Evo rezultata:

<Članak>

Izvođenje bilo kojeg NPM paketa u pregledniku lokalno

JavaScript nikada nije imao službeno rješenje za distribuciju paketa, a svaka web platforma (Rails, Django itd.) ima svoju ideju kako strukturirati i pakirati JavaScript. U posljednjih nekoliko godina NPM je postao kanonski način distribucije, s Webpackom kao sustavom za izgradnju, ali ne postoji način učitavanja NPM paketa u preglednik bez komponente na strani poslužitelja.

Scrimba je platforma za interaktivno kodiranje screencast gdje možete pokrenuti kôd u bilo kojem trenutku.

Ako ovu datoteku otvorite na web mjestu bez prilagođavanja izgleda, izgledat će ovako:

Nije posebno elegantna. Pa to ispravimo CSS Gridom. Učinit ćemo to korak po korak tako da vam bude lako.

Osnovna postavka za marže

Prvo što trebamo učiniti je pretvoriti čitavu oznaku članka u mrežu i dodijeliti joj barem tri stupca.

članak {
    prikaz: rešetka;
    grid-template-stupci: 1fr 740px 1fr;
}

Prvi i posljednji stupac reagiraju i djeluju kao marže. U većini će slučajeva sadržavati bijeli prostor. Srednji stupac je fiksiran na 740 piksela i sadržavat će sadržaj članka.

Primijetite da redove ne definiramo jer će oni jednostavno biti visoki koliko trebaju biti kako bi odgovarali njihovom sadržaju. Svaki blok sadržaja u članku (odlomak, slika, naslov) dobit će svoj redak.

Sljedeći korak je osigurati da sav sadržaj u mreži početno započne u drugom retku stupca.

članak> * {
    rešetka-stupac: 2;
}

Sada imamo sljedeći rezultat:

Odmah možemo vidjeti da to izgleda bolje, budući da bijeli razmak sa svake strane olakšava čitanje teksta.

Međutim, ovaj se učinak mogao postići jednako lako pomoću postavljanja osobine lijeve i desne margine na auto. Pa zašto koristiti CSS Grid?

Pa, problem nastaje kada želimo oponašati značajke medija Medium. Na primjer, stvaranje slika pune širine, poput ove:

Da smo koristili margin: 0 auto, to bi nas prisililo da primijenimo negativne margine na slike kako bismo ih preuzeli na cijeloj širini web stranice, što je šokantno.

Sa CSS Gridom, to postaje komad torte, jer ćemo jednostavno koristiti stupce za podešavanje širine. Da bi naša slika zauzela cijelu širinu, reći ćemo joj da se proteže od prvog do posljednjeg retka stupca.

članak> figura {
    rešetka-stupac: 1 / -1;
    marža: 20px 0;
}

Također smo postavili neke margine na vrhu i dnu. A onda imamo lijepu sliku u punoj širini:

Proširivanje s više stupaca

Međutim, to nas ne vodi na sve načine, jer Medium ima nekoliko drugih nacrta na koje moramo uzeti u obzir. Pogledajmo nekoliko njih:

Slike srednje veličine

Ovo je opcija slike između normalne i pune širine, koju ćemo nazvati srednje veličine. To izgleda ovako:

NAPOMENA: Ako ga gledate na mobilnom uređaju, slika je identična punoj širini. U ovom se članku fokusiramo samo na raspored radne površine.

Ovo će zahtijevati najmanje dva nova stupca za naš izgled.

Citati

Pored toga, Medium također postavlja okomitu liniju na lijevu stranu članka ako dodate citat:

← Uočite okomitu liniju. Morat ćemo dodati dodatni stupac u našu mrežu zbog njega.

Za to je potreban maleni stupac na lijevoj strani rešetke. Da bismo stvari učinili simetričnim, dodaćemo i sličan stupac s desne strane.

Dakle, za podršku citata i slike srednje veličine trebat ćemo podijeliti cijelu širinu u sedam stupaca umjesto u tri, poput ovog ;:

članak {
    prikaz: rešetka;
    grid-template-stupci: 1fr 1fr 10px 740px 10px 1fr 1fr;
}

Ako koristimo preglednik Chrome, zapravo možemo vidjeti osnovne mreže rešetke (pogledajte sliku dolje). Pored toga, dodao sam pokazatelje da bih olakšao prepoznavanje različitih stupaca.

Dodao sam pokazivače kako bih olakšao prepoznavanje različitih stupaca.

Prvo što trebamo učiniti kako bi sve zadane stavke počele od četvrtog retka stupca umjesto drugog.

članak> * {
    rešetka-stupac: 4;
}

Tada možemo stvoriti sliku srednje veličine radeći:

članak> figura {
    rešetka-stupac: 2 / -2;
    marža: 20px 0;
}

Evo kako to izgleda s aktiviranim preglednikom Chrome:

Citati se lako stvaraju na sljedeći način:

članak> blok citata {
    rešetka-stupac: 3/5;
    padding-left: 10px;
    boja: # 666;
    obrub lijevo: 3px čvrste crne boje;
}

Izrađujemo ga od trećeg do trećeg do petog retka stupca. Također dodajemo padding-left: 10px; tako da se čini da će tekst početi u retku četvrtog stupca (treći je stupac također širok 10 piksela). Evo kako to izgleda na mreži.

Sidemarks

Sada imamo jednu posljednju stvar koju moramo podržati. Medium ima prilično lijep način signalizacije koji je sadržaj u članku najviše istaknut. Tekst se pretvara u zelenu boju i dobiva gornji naglasak na desnoj strani.

Element teksta s najviše oznake bio bi noćna mora koju bismo stvorili ako bi koristili maržu: 0 automatski; umjesto toga ako CSS Grid. To je zato što element djeluje drugačije od svih ostalih elemenata u članku. Umjesto da se pojavljuje na novoj liniji, pretpostavlja se da se pojavljuje na desnoj strani prethodnog elementa. Da nismo koristili CSS Grid, vjerojatno bismo se trebali micati sa položajem: apsolutno; da bi ovo učinio.

No, s CSS Gridom vrlo je jednostavno. Upravo ćemo takav element započeti na liniji četvrtog stupca.

.aside {
    rešetka-stupac: 5;
}

To će automatski učiniti da se postavi desno od članka:

Napomena: Nisam označio tekst zelenom bojom, jer to nema nikakve veze sa CSS Gridom.

I to je to! Sada smo rekreirali većinu izgleda članka Medium pomoću CSS Grid-a. A zapravo je bilo prilično jednostavno. Ipak imajte na umu da nismo dotakli reaktivnost, jer to zahtijeva sam novi članak.

Pogledajte ovo Scrimba igralište da biste pogledali sav kod.

Hvala na čitanju! Zovem se Per, suosnivač sam Scrimba i volim pomagati ljudima da nauče nove vještine. Slijedite me na Twitteru ako želite biti obaviješteni o novim člancima i resursima.