elementele noastre să fie elementele noastre de rețea.

Câteva panouri au text în ele, dar restul va fi pentru imaginile noastre de benzi desenate. Avem două opțiuni aici: putem plasa imaginile noastre în interiorul panourilor sau puteți adăuga imagini prin CSS. Fac aceasta din urmă pentru că oferă un control mai ușor asupra plasării și dimensiunii grafice, dar ați putea susține că imaginile inline ar fi mai accesibile. Alegerea ta.

2. Stiluri de bază

Pentru a obține rostogolirea mingii (blană), să adăugăm câteva stiluri care să acopere tipografia și culorile noastre:

/ * elementele de bază * / corpul background: # f8f7f2; umplutură: 0 10%; font: 100% / 1.5 'Kalam', cursive;  h1 margine: 0; linia-înălțime: 1; padding: 10px; culoare: # 251b19;  p margine: 0; padding: 10px; culoare: # 251b19; font-size: 1.2m; a culoare: # e56633;  a: hover text-decorare: nimic;  

Am ales Kalam ca font web Google pentru textul nostru - stilul său scris de mână este perfect pentru benzi desenate mă gândesc. Va trebui să îl conectați în CSS sau printr-un link din capul documentului:

Kalam pe Google Fonts

3. Gridul nostru

Pornind mai întâi pentru mobil, vom pune lucrurile într-o coloană cu un singur panou pe fiecare rând:

.grilă-1 display: grilă; lățime: 100%; max-lățime: 770px; marja: 10% auto; grilă-șablon-coloane: 1fr; grilă-șablon-rânduri: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; grid-gap: 25px; 

Privind înapoi la tutorialele noastre din Grid anterioare, îți vei aminti asta grilă matriță coloane atribuie câte coloane vom avea și cât de largi vor fi. grid-șablon rânduri face același lucru pentru rânduri; aici definim unsprezece dintre ei. Cele care conțin imagini vor avea o înălțime de 200 de pixeli, cele cu text vor fi dimensionate automat în funcție de conținut. In cele din urma, grid-gap definește mărimea jgheabului.

Să adăugăm acum câteva stiluri generale panourilor noastre:

.panou culoare: alb; background-repeat: nu-repeta; fundal-poziție: centru centru; dimensiunea fundalului: capac; box-shadow: 0px 0px 0px 5px # 251b19; 

fundal proprietatile nu au nici un impact vizual tocmai inca, dar vor fi doar de indata ce vom adauga cateva imagini de fundal. Si box-shadow acționează ca graniță. Puteți utiliza, de asemenea, tradiționale frontieră proprietăți aici, dacă preferați, dar umbra în cutie uneori oferă o mai mare flexibilitate.

Să vedem ce avem până acum!

4. Cat Pictures

Pentru ce a fost creat internetul, nu? Am pregătit câteva imagini SVG pentru a adăuga panourile, pe care le fac unul câte unul:

.panoul-1 fundal-imagine: url (cat-1.svg); 

Arata bine!

Dar nu vreau frontierele toate panourile. Le voi elimina (folosind box-shadow: nici unul;) din cele care conțin text, împreună cu prima imagine și imaginea finală.

5. Întrebări media

Aceste imagini nu funcționează încă perfect; bătrânul bătrân, Barry, ia o recoltă serioasă. Este timpul să privim dincolo de mobil și să ne modificăm grila pentru ferestrele de vizualizare mai mari. Să adăugăm câteva interogări media; unul la 400 de pixeli și unul la 600 de pixeli (cifre arbitrare, utilizați ceea ce doriți):

/ * interogare media 1 * / numai @ ecran și (min-width: 400px)  / * interogare media 2 * / numai @media și (min-width: 600px)

Le vom folosi pentru a modifica aspectul rețelei în fiecare caz.

/ * interogare media 1 * / numai @ ecran și (min-width: 400px) .grid-1 grid-template-coloane: repeat (2, 1fr); grilă-șablon-rânduri: auto 200px auto 200px 200px auto 200px auto;  / * interogare media 2 * / @media numai pe ecran și (min-width: 600px) .grid-1 grid-template-coloane: repeat (3, 1fr); grilă-șablon-rânduri: auto 200px 200px 200px auto; 

Mergem pentru două coloane și opt rânduri pentru ecrane ușor mai mari, apoi trei coloane și cinci rânduri pentru chiar mai mari.

Spanning

Acum am izbucnit din constrângerile noastre de coloană unică, putem fi puțin mai creativi. Avem nevoie, de exemplu, de titlul nostru pentru a alerga de-a lungul lățimii întregului benzi desenate. Același lucru este valabil și pentru panourile care conțin text și declarația privind drepturile de autor. Chiar și unele dintre imagini ar fi mai bine servite în panouri cu lățime întreagă. Așadar, vom adăuga aceste detalii la prima dintre întrebările noastre media:

 .panel-title, .panel-3, .panel-6, .panel-7, .panel-copyright grilă-coloană: span 2; 

Am schimbat și tipografia în câteva cazuri, dându-ne în cele din urmă:

Dimensiunea noastră de două coloane arată grozav! Cu toate acestea, nevoile noastre de trei coloane de benzi desenate trebuie fixate.

Aproape functioneaza ...

6. Fixarea celei de-a treia coloane

Pe măsură ce lucrăm mai întâi la nivel de telefon mobil, regulile pe care le-am aplicat la prima noastră interogare media continuă să aibă efect asupra celei mai mari ecrane. Trebuie să lucrăm prin panouri și să resetăm câteva stiluri. 

Începeți prin a face .Panou-titlu span trei coloane, în loc de doar două. Atunci .Panou-3 (cu textul) poate fi readus la grilă-coloană: interval 1; sau grilă-coloană: auto;

Același lucru este valabil și pentru .Panou-6. Cu câteva schimbări, ar trebui să ajungeți la ceva de genul:

Un Wee Bit de Flexbox

Aș dori ca primul dialog să fie centrat pe verticală, deci să folosim flexbox pentru a face asta. Adăugați următoarele la cea de-a doua interogare media:

 .panoul-3 display: flex; aliniere: centru; 

Înainte de flexbox, după flexbox

7. Suprapunerea panourilor

Grilă nu ne limitează la blocuri echidistant care rulează de-a lungul și în jos o pagină, putem, de asemenea, strat straturi de panouri prea. Vom face puțin mai interesant textul nostru final atribuindu-l aceleiași locații ca și panoul următor: 

 .panoul-7 grilă-coloană: 1; grilă-rând: 4; z-index: 1;  .panel-8 grilă-coloană: 1 / span 2; grilă-rând: 4; 

Aici am poziționat amândouă .Panou-7 și .Panou-8 la grilă-coloană: 1; și grilă-rând: 4;. Asta inseamna ca ambele sunt in acelasi loc, oricare ar aparea pe locul doi in DOM, fiind stivuit in partea de sus a primei.

Putem folosi z-index pentru a modifica ordinea de stivuire, deci da .Panou-7 A z-index: 1; o aduce la început:

Notă: acum că am eliminat efectiv un rând, va trebui să vă verificați grid-șablon rânduri sunt ok. 

Să adăugăm un stil mai mult la "Naaah". Din nou, elementele de rețea nu sunt restricționate la fel de mult cum ați putea crede - le putem schimba cu margini negative și chiar le putem transforma fără nici o problemă. Am adaugat cateva stiluri la panou si paragraful din el pentru a da aceasta:

Concluzie

Bine, iată ce am construit!

Acesta a fost un exercițiu distractiv în utilizarea rețelei CSS, introducând în același timp câteva noi concepte Grid de-a lungul drumului. Sper că ți-a plăcut - acum dacă nu te deranjează, am plecat pentru un pui de somn.

Citirea în continuare

• Înțelegerea seriei începătorilor CSS Grid Layout
• Sleepy Fat Cat de tipar pe GraphicRiver
• Mecanica de benzi desenate
• Înțelegerea de benzi desenate de Scott McCloud