Î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: sensibilitatea va fi adăugată cu o singură linie de CSS.
Acest lucru înseamnă că nu trebuie să dezordona HTML cu nume de clase urâte ( de exemplu col-sm-4, col-md-8) sau pentru a crea interogări media pentru fiecare dimensiune singur ecran.
Dacă doriți să învățați să construiți site-uri web receptive la nivel profesional, puteți lua în considerare verificarea bootcamp-ului de design web receptiv al Scrimba, deoarece studenții de la începători la avansați au nevoie de 15 ore de tutoriale interactive.
Acum, să sărim în el!
Pregatirea
Pentru acest articol, vom continua cu grila pe care am folosit-o în primul meu articol CSS Grid. Apoi vom adăuga imaginile la sfârșitul articolului. Iată cum arată grila noastră inițială:
Iată codul HTML:
1 2 3 4 5 6 Ș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ă citiți articolul Learn CSS Grid în 5 minute, 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 complet 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 fiecare. Iată rezultatul:
Dacă schimbăm grid-template-columnsvaloarea în 1fr 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ă:
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ția. 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 lor, deci acest lucru ne va oferi exact același aspect așa cum am început cu:
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:
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.
However, if we hard code all columns to be exactly 100px, we’ll never get the flexibility we want, as they’ll rarely add up to the full width. As you can see on the gif above, the grid often leaves white space on the right-hand side.
minmax()
The final ingredient we need in order to fix this is called minmax(). We’ll simply replace 100px with minmax(100px, 1fr). Here’s the final CSS.
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } Notice that all the responsiveness happens in a single line of CSS.
This results in the following behaviour:
And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.
So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.
Adding the images
Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.
We’ll start off by adding an image tag inside of each of the grid items.
To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.
.container > div > img { width: 100%; height: 100%; object-fit: cover; } Which ends up like the following:
And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.
Browser support
Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.
If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.