Kako svoj HTML reagirati dodavanjem jednog retka CSS-a

U ovom članku naučit ću vas kako pomoću CSS Grid-a stvoriti super cool mrežu slika koja mijenja broj stupaca s širinom zaslona.

I najljepši dio: odziv će biti dodan jednim retkom CSS-a.

To znači da ne moramo pretrpati HTML ružnim imenima klasa (tj col-sm-4. col-md-8) Ili stvarati medijske upite za svaku pojedinu veličinu zaslona.

Ako želite naučiti izrađivati ​​responzivne web stranice na profesionalnoj razini, možete razmisliti o provjeri Scrimbinog responzivnog web kampa za dizajniranje, jer studenti od početnika do naprednika prolaze kroz 15 sati interaktivnih vodiča.

Sad uskočimo u to!

Postava

Za ovaj ćemo članak nastaviti s mrežom koju smo koristili u mom prvom članku o CSS mreži. Zatim ćemo dodati slike na kraju članka. Evo kako izgleda naša početna mreža:

Evo HTML-a:

 1 2 3 4 5 6 

I CSS:

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

Napomena: primjer također ima malo osnovnog stila, o čemu ovdje neću ulaziti, jer nema nikakve veze sa CSS Gridom.

Ako vas ovaj kod zbunjuje, preporučio bih vam da pročitate moj članak Learn CSS Grid za 5 minuta, gdje objašnjavam osnove modula izgleda.

Započnimo s prilagođavanjem stupaca.

Osnovni odziv s jedinicom razlomka

CSS Grid sa sobom donosi sasvim novu vrijednost koja se naziva razlomak. Jedinica razlomka napisana je poput fri omogućuje vam razdvajanje spremnika na onoliko razlomaka koliko želite.

Promijenimo svaki stupac tako da bude širok po jedan razlomak.

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

Ovdje se događa da se mreža cijelom širinom podijeli na tri razlomka i svaki stupac zauzima po jednu jedinicu. Evo rezultata:

Ako promijenimo grid-template-columnsvrijednost na 1fr 2fr 1fr, drugi će stupac sada biti dvostruko širi od druga dva stupca. Ukupna širina sada iznosi četiri frakcijske jedinice, a druga zauzima dvije, dok ostale zauzimaju po jednu. Evo kako to izgleda:

Drugim riječima, vrijednost jedinice razlomka olakšava vam promjenu širine stupaca.

Napredna reakcija

Međutim, gornji primjer ne daje nam željenu reakciju, jer će ova mreža uvijek biti široka tri stupca. Želimo da naša mreža mijenja broj stupaca s širinom spremnika. Da biste to postigli, morat ćete naučiti tri nova pojma.

ponoviti()

Krenut ćemo s repeat()funkcijom. Ovo je snažniji način određivanja vaših stupaca i redaka. Uzmimo našu izvornu mrežu i promijenimo je u uporabu repeat ():

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

Drugim riječima, repeat(3, 100px)identičan je 100px 100px 100px. Prvi parametar specificirao je koliko stupaca ili redaka želite, a drugi njihovu širinu, tako da će nam to dati točno isti izgled kao što smo započeli:

auto-fit

Zatim postoji automatsko uklapanje. Preskočimo fiksnu količinu stupaca i radije zamijenimo 3 s auto-fit.

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

To rezultira sljedećim ponašanjem:

Mreža sada mijenja broj stupaca s širinom spremnika.

Jednostavno pokušava u spremnik uklopiti što više stupova širine 100 piksela.

Međutim, ako tvrdo kodiramo da svi stupci imaju točno 100 piksela, nikada nećemo dobiti željenu fleksibilnost, jer će se rijetko zbrajati u cijelu širinu. Kao što možete vidjeti na gornjem gifu, mreža često ostavlja prazan prostor s desne strane.

minmax ()

Konačni sastojak koji nam je potreban da bismo to popravili zove se minmax(). Jednostavno ćemo zamijeniti 100 piksela sa minmax(100px, 1fr). Evo konačnog CSS-a.

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

Primijetite da se sva reakcija događa u jednom retku CSS-a.

To rezultira sljedećim ponašanjem:

I kao što vidite, to savršeno djeluje. minmax()Funkcija definira opseg veličine veća od ili jednaka do minuta i manje od ili jednako 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.