Kaip padaryti, kad jūsų HTML būtų jautrus, pridedant vieną CSS eilutę

Šiame straipsnyje aš išmokysiu jus naudoti CSS tinklelį, kad sukurtumėte puikų vaizdų tinklelį, kuris skiriasi stulpelių skaičiumi ir ekrano pločiu.

Ir gražiausia dalis: atsakas bus pridėtas viena CSS eilute.

Tai reiškia, kad mes neturime Sablīvēt HTML su negraži klasės pavadinimus (ty col-sm-4, col-md-8) arba sukurti žiniasklaidos užklausas kiekvieną ekrano dydžio.

Jei norite išmokti kurti reaguojančias svetaines profesionaliu lygiu, galite apsvarstyti galimybę patikrinti „Scrimba“ atsakingą interneto dizaino įkrovos stovyklą, nes mokiniams nuo pradedančiųjų iki pažengusių reikia 15 valandų interaktyvių pamokų.

Dabar pereikime prie jo!

Sąranka

Šiame straipsnyje mes tęsime tinklelį, kurį naudojome pirmajame CSS tinklelio straipsnyje. Tada pridėsime vaizdus straipsnio pabaigoje. Štai kaip atrodo mūsų pradinis tinklelis:

Štai HTML:

 1 2 3 4 5 6 

Ir CSS:

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

Pastaba: pavyzdyje taip pat yra šiek tiek pagrindinio stiliaus, į kurį čia nesileisiu, nes jis neturi nieko bendra su CSS tinkleliu.

Jei šis kodas jus glumina, rekomenduočiau perskaityti mano straipsnį „Sužinokite CSS tinklelį per 5 minutes“, kuriame paaiškinu išdėstymo modulio pagrindus.

Pradėkime nuo stulpelių pritaikymo.

Pagrindinis reakcijos koeficientas

CSS tinklelis atneša visiškai naują vertę, vadinamą trupmena. Dalių vienetas yra parašytas panašiai fr, ir tai leidžia padalyti talpyklą į tiek frakcijų, kiek norite.

Pakeiskime kiekvieną stulpelį į vieną trupmenos vieneto plotį.

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

Čia atsitinka taip, kad tinklelis padalija visą plotį į tris dalis, o kiekvienas stulpelis užima po vieną vienetą. Štai rezultatas:

Jei grid-template-columnsreikšmę pakeisime į 1fr 2fr 1fr, antrasis stulpelis dabar bus dvigubai platesnis nei kiti du stulpeliai. Dabar bendras plotis yra keturi trupmenos vienetai, o antrasis užima du iš jų, o kiti - po vieną. Štai kaip tai atrodo:

Kitaip tariant, trupmenos vieneto vertė leidžia labai lengvai pakeisti stulpelių plotį.

Pažangus reagavimas

Tačiau aukščiau pateiktas pavyzdys nesuteikia norimo reagavimo, nes šis tinklelis visada bus trijų stulpelių pločio. Mes norime, kad mūsų tinklelis skirtų stulpelių skaičių pagal konteinerio plotį. Norėdami tai pasiekti, turėsite išmokti tris naujas sąvokas.

pakartoti ()

Pradėsime nuo repeat()funkcijos. Tai yra galingesnis būdas nurodyti stulpelius ir eilutes. Paimkime pradinį tinklelį ir pakeiskime jį naudodami pakartojimą ():

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

Kitaip tariant, repeat(3, 100px)yra identiškas 100px 100px 100px. Pirmasis parametras nurodė, kiek stulpelių ar eilučių norite, o antrasis nurodo jų plotį, taigi tai suteiks mums tą patį išdėstymą, kaip mes pradėjome:

automatinis pritaikymas

Tada yra automatinis pritaikymas. Praleiskime fiksuotą stulpelių kiekį ir verčiau pakeiskime 3 auto-fit.

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

Tai lemia tokį elgesį:

Tinklelis dabar keičia stulpelių skaičių, atsižvelgiant į talpyklos plotį.

Paprasčiausiai į konteinerį bandoma sutalpinti kuo daugiau 100 taškų pločio kolonų.

Vis dėlto, jei sugriežtinsime visus stulpelius iki 100 pikselių, mes niekada nepasieksime norimo lankstumo, nes jie retai pridedami prie viso pločio. Kaip matote aukščiau esančiame gife, tinklelis dešinėje pusėje dažnai palieka baltą vietą.

minmax ()

Vadinamas galutinis ingredientas, kurio mums reikia norint tai išspręsti minmax(). Paprasčiausiai pakeisime 100 taškų minmax(100px, 1fr). Štai paskutinė CSS.

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

Atkreipkite dėmesį, kad visas reagavimas vyksta vienoje CSS eilutėje.

Tai lemia tokį elgesį:

Ir, kaip matote, tai veikia puikiai. minmax()Funkcija apibrėžia dydis yra nuo lygi arba didesnė negu į min ir mažiau negu arba lygi 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

Prieš mums baigiant, aš taip pat turiu paminėti naršyklės palaikymą. Rašant šį straipsnį, 93% pasaulio svetainių srauto palaiko CSS tinklelį, ir jis auga. Vis labiau aiškėja, kad „Grid“ virsta privalomais įgūdžiais, skirtais front-end kūrėjams. Panašiai kaip prieš kelerius metus nutiko CSS „Flexbox“.

Jei norite visam laikui išmokti „Flexbox“, „Grid“ ir „responsive“ dizaino, turėtumėte patikrinti „Scrimba“ interaktyvų interneto dizaino įkrovos kampą. Pradedantysis pažengs į priekį naudodamasis interaktyviomis pamokomis, kurias lengva stebėti.

Ačiū, kad skaitėte! Mano vardas Peras Borgenas, esu interaktyvios mokymosi platformos „Scrimba“, skirtos mokytis koduoti, įkūrėjas.