În acest articol, vă voi învăța cum să utilizați CSS Grid pentru a crea o grilă de imagine super cool, care variază numărul de coloane cu lățimea ecranului.

Și cea mai frumoasă parte: reactivitatea va fi adăugată cu o singură linie de CSS.

Aceasta înseamnă că nu trebuie să aglomerați HTML-ul cu nume de clasă urâte (adică col-sm-4, col-md-8) sau creați interogări media pentru fiecare dimensiune a ecranului.

Dacă doriți să învățați să creați site-uri web receptive la nivel profesional, puteți lua în considerare verificarea Bootcamp-ul de design web receptiv al Scrimba, deoarece studenții încep de la începători la avansați prin 15 ore de tutoriale interactive.

Acum, să sărim în el!

Pregatirea

Pentru acest articol, vom continua cu grila folosită primul meu articol CSS Grid. Apoi vom adăuga imaginile la sfârșitul articolului. Iată cum arată grila noastră inițială:

Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Iată codul HTML:

<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>

Și CSS:

.container {  
    display: grid;  
    grid-template-columns: 100px 100px 100px;  
    grid-template-rows: 50px 50px;  
}

Notă: exemplul are, de asemenea, un pic de stil de bază, pe care nu îl voi analiza aici, deoarece nu are nimic de-a face cu CSS Grid.

Dacă acest cod vă încurcă, vă recomand să-mi citiți Aflați grila CSS în 5 minute articol, unde explic elementele de bază ale modulului de aspect.

Să începem prin a face coloanele receptive.

Sensibilitate de bază cu unitatea fracției

Grila CSS aduce cu sine o valoare cu totul nouă numită unitate fracțională. Unitatea fracției este scrisă ca frși vă permite să împărțiți containerul în câte fracții doriți.

Să schimbăm fiecare dintre coloane pentru a avea o fracțiune de lățime.

.container {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 50px 50px;  
}

Ceea ce se întâmplă aici este că grila împarte întreaga lățime în trei fracții și fiecare dintre coloane ocupă câte o unitate. Iată rezultatul:

Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Dacă schimbăm grid-template-columns valoare pentru1fr 2fr 1fr, a doua coloană va fi acum de două ori mai lată decât celelalte două coloane. Lățimea totală este acum de patru unități fracționale, iar a doua ocupă două dintre ele, în timp ce celelalte ocupă câte una. Iată cum arată:

1611868446 149 Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Cu alte cuvinte, valoarea unității de fracție vă face foarte ușor să modificați lățimea coloanelor.

Sensibilitate avansată

Cu toate acestea, exemplul de mai sus nu ne oferă reacția dorită, deoarece această grilă va avea întotdeauna o lățime de trei coloane. Vrem ca grila noastră să varieze numărul de coloane cu lățimea containerului. Pentru a realiza acest lucru, va trebui să învățați trei concepte noi.

repeta()

Vom începe cu repeat() funcţie. Acesta este un mod mai puternic de a specifica coloanele și rândurile. Să luăm grila noastră originală și să o schimbăm folosind repeat ():

.container {  
    display: grid;  
    grid-template-columns: repeat(3, 100px);  
    grid-template-rows: repeat(2, 50px);  
}

Cu alte cuvinte, repeat(3, 100px) este identic cu 100px 100px 100px. Primul parametru a specificat câte coloane sau rânduri doriți, iar al doilea specifică lățimea acestora, deci acest lucru ne va oferi exact același aspect cu care am început:

Cum sa faceti HTML sa raspunda prin adaugarea unei singure

auto-fit

Apoi, există ajustarea automată. Să omitem să avem o cantitate fixă ​​de coloane și să înlocuim mai degrabă 3 cu auto-fit.

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}

Acest lucru duce la următorul comportament:

1611868446 848 Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Acum grila variază numărul de coloane cu lățimea containerului.

Pur și simplu încearcă să se potrivească cât mai multe coloane cu lățimea de 100 px în container.

Cu toate acestea, dacă codificăm toate coloanele pentru a avea exact 100 px, nu vom obține niciodată flexibilitatea dorită, deoarece acestea se vor adăuga rar la lățimea totală. După cum puteți vedea în gif de mai sus, grila lasă adesea spațiu alb în partea dreaptă.

minim maxim()

Ingredientul final de care avem nevoie pentru a remedia problema se numește minmax(). Vom înlocui pur și simplu 100px cu minmax(100px, 1fr). Iată CSS-ul final.

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}

Observați că toată capacitatea de reacție se întâmplă într-o singură linie de CSS.

Acest lucru duce la următorul comportament:

1611868446 278 Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Și, după cum puteți vedea, funcționează perfect. minmax() funcția definește un interval de dimensiuni mai mare sau egal cu min și mai mic sau egal cu max.

Deci, acum coloanele vor avea întotdeauna cel puțin 100 px. Cu toate acestea, dacă există mai mult spațiu disponibil, grila va distribui acest lucru în mod egal în fiecare dintre coloane, deoarece coloanele se transformă într-o unitate fracțională în loc de 100 px.

Adăugarea imaginilor

Acum, ultimul pas este să adăugați imaginile. Acest lucru nu are nimic de-a face cu CSS Grid, dar să analizăm în continuare codul.

Vom începe prin adăugarea unei etichete de imagine în interiorul fiecărui element de grilă.

<div>
    <img src="https://www.freecodecamp.org/news/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431/img/forest.jpg"/>
</div>

Pentru a face ca imaginea să se încadreze în articol, o vom seta să fie la fel de largă și înaltă ca articolul în sine, apoi o vom folosi object-fit: cover;. Aceasta va face ca imaginea să-și acopere întregul container, iar browserul să o decupeze dacă este nevoie.

.container > div > img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}

Ceea ce se termină după cum urmează:

1611868446 147 Cum sa faceti HTML sa raspunda prin adaugarea unei singure

Si asta e! Acum cunoașteți unul dintre cele mai complexe concepte din CSS Grid, așa că lăsați-vă un pic pe spate.

Suport pentru browser

Înainte de a încheia, trebuie să menționez și asistența pentru browser. În momentul redactării acestui articol, 93% din traficul global al site-ului web acceptă CSS Grid, și urcă. Devine din ce în ce mai clar că Grid se transformă într-o abilitate obligatorie pentru dezvoltatorii front-end. La fel ca ceea ce s-a întâmplat cu CSS Flexbox acum câțiva ani.

Dacă doriți să învățați odată pentru totdeauna Flexbox, Grid și design receptiv, ar trebui să verificați bootcamp de design web receptiv pe Scrimba. Îți va duce începătorul la avansat prin tutoriale interactive care sunt ușor de urmat.

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

Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba, o platformă de învățare interactivă pentru învățarea codării.