Kuidas muuta oma HTML reageerivaks, lisades ühe rea CSS-i

Selles artiklis õpetan teile, kuidas CSS Gridi abil luua ülilahe pildivõrk, mis varieerub veergude arvuga ekraani laiusega.

Ja kõige ilusam osa: reageerimisvõime lisatakse ühe rea CSS-iga.

See tähendab, et me ei pea segaks HTML kole klassi nimed (st col-sm-4, col-md-8) või luua Meediapäringuid iga ekraani suurus.

Kui soovite õppida tundlike veebisaitide loomist professionaalsel tasemel, võite kaaluda Scrimba tundliku veebidisaini alglaadimise tutvumist, kuna see võtab õpilasi algajast edasijõudnuteni 15 tunni interaktiivsete õpetuste kaudu.

Hüppame nüüd sellesse!

Seadistamine

Selle artikli jaoks jätkame ruudustikuga, mida kasutasime minu esimeses CSS Grid'i artiklis. Siis lisame pildid artikli lõppu. Meie esialgne võrk näeb välja nii:

Siin on HTML:

 1 2 3 4 5 6 

Ja CSS:

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

Märkus: näites on ka natuke põhilist stiili, mida ma siin ei käsitle, kuna sellel pole midagi pistmist CSS Gridiga.

Kui see kood teid segadusse ajab, soovitaksin teil lugeda minu artiklit Learn CSS Grid in 5 minutes, kus selgitan paigutusmooduli põhitõdesid.

Alustuseks muudame veerud reageerivaks.

Põhiline reageerimisvõime murdühikuga

CSS Grid toob endaga kaasa täiesti uue väärtuse, mida nimetatakse murdühikuks. Murdühik on kirjutatud nagu frja see võimaldab teil konteineri jagada nii paljudeks murdudeks kui soovite.

Muutkem iga veerg ühe murdühiku laiuseks.

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

Siin juhtub see, et ruudustik jagab kogu laiuse kolmeks osaks ja iga veerg võtab enda alla ühe ühiku. Siin on tulemus:

Kui muudame grid-template-columnsväärtuse väärtuseks 1fr 2fr 1fr, on teine ​​veerg nüüd kaks korda laiem kui ülejäänud kaks veergu. Kogulaius on nüüd neli murdühikut ja teine ​​võtab neist kaks, teised aga ühe. See näeb välja järgmine:

Teisisõnu, murdühiku väärtus muudab veergude laiuse muutmise ülilihtsaks.

Täiustatud reageerimisvõime

Kuid ülaltoodud näide ei anna meile soovitud reageerimisvõimet, kuna see ruudustik on alati kolme veeru lai. Soovime, et meie võrk varieeruks veergude arvu vastavalt konteineri laiusele. Selle saavutamiseks peate õppima kolm uut mõistet.

kordus ()

Alustame repeat()funktsioonist. See on võimsam viis veergude ja ridade täpsustamiseks. Võtame oma algse ruudustiku ja muudame selle korduvaks ():

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

Teisisõnu, repeat(3, 100px)on identne 100px 100px 100px. Esimene parameeter täpsustas, mitu veergu või rida soovite, ja teine ​​määrab nende laiuse, nii et see annab meile lihtsalt täpselt sama paigutuse, nagu alustasime:

automaatne sobivus

Siis on automaatne sobivus. Jätame kindla veergude arvu vahele ja asendame pigem 3 veergudega auto-fit.

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

Selle tulemuseks on järgmine käitumine:

Nüüd muudab ruudustik veergude arvu koos konteineri laiusega.

See lihtsalt üritab mahutisse mahutada võimalikult palju 100px laiuseid veerge.

Kui aga kodeerime kõik veerud täpselt 100px-ni, ei saa me kunagi soovitud paindlikkust, kuna need moodustavad harva kogu laiuse. Nagu ülaltoodud gifist näha, jätab võrk paremal pool sageli tühja ruumi.

minmax ()

Viimast koostisosa, mida me selle parandamiseks vajame, nimetatakse minmax(). Asendame 100px lihtsalt minmax(100px, 1fr). Siin on viimane CSS.

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

Pange tähele, et kogu reageerimine toimub CSS-i ühes reas.

Selle tulemuseks on järgmine käitumine:

Ja nagu näete, töötab see suurepäraselt. minmax()Funktsiooni defineerib suuruspiirkond suurem või võrdne min ja väiksem või võrdne 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

Enne kui lõpetame, pean mainima ka brauseri tuge. Selle artikli kirjutamise ajal toetab 93% kogu veebisaidi liiklusest CSS Gridi ja see ronib. Üha selgemaks saab, et Grid on muutumas esiosa arendajate jaoks vajalikuks oskuseks. Sarnaselt CSS Flexboxiga paar aastat tagasi juhtunule.

Kui soovite lõplikult õppida Flexboxi, Gridi ja tundlikku disaini, peaksite tutvuma Scrimba reageeriva veebidisaini alglaagriga. Algajal on vaja edasi liikuda interaktiivsete õpetuste kaudu, mida on lihtne jälgida.

Täname lugemast! Minu nimi on Per Borgen, ma olen kodeerimise õppimise interaktiivse õppeplatvormi Scrimba asutaja.