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

Foto autor TJ Holowaychuk

Selles artiklis õpetan teile, kuidas kasutada CSS-ruutu ülilaheda pildivõrgu loomiseks, mis muudab veergude arvu ekraani laiusega.

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

See tähendab, et me ei pea rippima HTML-i inetu klassinimedega (nt col-sm-4, col-md-8) ega looma meediumipäringuid iga ekraani suuruse kohta.

Olen loonud ka tasuta CSS Gridi kursuse. Sellele täieliku juurdepääsu saamiseks klõpsake siin.
Kursusele pääsemiseks klõpsake pildil.

Vaatame nüüd selle sisse!

Seadistamine

Selle artikli jaoks jätkame ruudustikku, mida kasutasime minu esimeses CSS-i ruudustikuartiklis. Siis lisame pildid artikli lõppu. Meie esialgne ruudustik näeb välja järgmine:

Siin on HTML:

  
1
  
2
  
3
  
4
  
5
  
6

Ja CSS:

.konteiner {
    kuva: ruudustik;
    ruudustik-mall-veerud: 100 pikslit 100 pikslit 100 pikslit;
    ruudustik-mall-read: 50 pikslit 50 pikslit;
}
Märkus. Näites on ka natuke põhilisi stiile, mida ma siin ei käsitle, kuna sellel pole CSS Gridiga mingit pistmist.

Kui see kood ajab teid segadusse, soovitaksin teil lugeda minu artiklit Õpi CSS-i ruutu 5 minutiga, kus ma selgitan paigutusmooduli põhitõdesid.

Alustame veergude reageerimise muutmisega.

Põhiline reageerimisvõime murdosaga

CSS Grid toob endaga kaasa täiesti uue väärtuse, mida nimetatakse murdosaks. Murdeühik on kirjutatud nagu fr ja see võimaldab teil jagada konteineri nii paljuks murdosaks kui soovite.

Muudame kõik veerud ühe murdosaühiku laiuseks.

.konteiner {
    kuva: ruudustik;
    ruudustik-mall-veerud: 1fr 1fr 1fr;
    ruudustik-mall-read: 50 pikslit 50 pikslit;
}

Siin juhtub see, et võre jagatakse kogu laius kolmeks osaks ja iga veerg võtab igaüks ühe ühiku. Siin on tulemus:

Kui muudame ruudustiku-malli-veergude väärtuse väärtuseks 1fr 2fr 1fr, on teine ​​veerg nüüd kaks korda laiem kui kaks muud veergu. Kogulaius on nüüd neli murdosaühikut ja teine ​​võtab neist kaks, teised aga ühe. See näeb välja järgmine:

Teisisõnu, murdosa ühiku väärtuse abil on teil veergude laiuse muutmine ülilihtne.

Täiustatud reageerimisvõime

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

korda ()

Alustame korduse () funktsiooniga. See on võimsam viis veergude ja ridade määramiseks. Võtame meie algse ruudustiku ja muudame selle korramiseks ():

.konteiner {
    kuva: ruudustik;
    ruudustik-mall-veerud: korrake (3, 100 pikslit);
    ruudustik-mall-read: korda (2, 50 pikslit);
}

Teisisõnu, korrake (3, 100 pikslit) on identne 100 pikslil 100 pikslil. Esimene parameeter täpsustas, mitu veergu või rida soovite, ja teine ​​täpsustab nende laiuse, nii et see annab meile täpselt sama paigutuse, nagu alguses:

automaatne sobivus

Siis toimub automaatne sobivus. Jätame vahele kindla arvu veerge ja asendame pigem kolme automaatse sobitamisega.

.konteiner {
    kuva: ruudustik;
    võrevahe: 5 px;
    ruudustik-mall-veerud: korrake (automaatne sobitamine, 100 pikslit);
    ruudustik-mall-read: korrake (2, 100 pikslit);
}

Selle tulemuseks on järgmine käitumine:

Võrk muudab veergude arvu nüüd konteineri laiusega.

See proovib mahutisse mahutada võimalikult palju 100 pikslit laiusi veerge.

Kui me kodeerime kõik veerud täpselt 100 piksli suuruseks, ei saa me kunagi soovitud paindlikkust, kuna need liidetakse harva täislaiuseni. Nagu ülaltoodud gifist näete, jätab ruudustik paremal küljel sageli tühja ruumi.

minmax ()

Viimast koostisosa, mida selle parandamiseks vajame, nimetatakse minmax (). Asendame 100 pikslit lihtsalt minimaalseks (100 pikslit, 1 piksli). Siin on viimane CSS.

.konteiner {
    kuva: ruudustik;
    võrevahe: 5 px;
    ruudustik-mall-veerud: korrake (automaatne sobitamine, minimax (100 pikslit, 1 fr));
    ruudustik-mall-read: korrake (2, 100 pikslit);
}
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. Funktsioon minmax () määratleb suurusvahemiku, mis on suurem või võrdne min-ga ja väiksem või võrdne maksimumiga.

Seega on veergude suurus alati vähemalt 100 pikslit. Kui aga ruumi on rohkem, jaotatakse ruudustik võrdselt igale veerule võrdselt, kuna veerud muutuvad murdosa ühikuks 100 piksli asemel.

Piltide lisamine

Nüüd on viimane samm piltide lisamine. Sellel pole CSS Gridiga mingit pistmist, kuid vaatame ikkagi koodi.

Alustame iga ruudustiku üksuse sisse pildi sildi lisamisega.

Selleks, et pilt sobiks üksusega, seame selle olema sama lai ja pikk kui eset ise ning kasutame siis objekti sobivust: katet ;. Sel juhul katab pilt kogu konteineri ja brauser kärbib selle vajaduse korral.

.konteiner> div> img {
    laius: 100%;
    kõrgus: 100%;
    objektikõlbulik: kate;
}

Mis lõpeb järgmiselt:

Ja see ongi kõik! Nüüd teate ühte CSS Gridi kõige keerukamat mõistet, nii et andke endale seljaosa patsutus.

Brauseri tugi

Enne meie lõppu pean mainima ka brauseri tuge. Selle artikli kirjutamise ajal toetab 77% kogu veebisaidi liiklusest CSS Gridi ja see on tõusuteel.

Usun, et 2018. aasta saab olema CSS Gridi aasta. See saab oma läbimurde läbi ja sellest saab esiplaanil töötavate arendajate kohustuslik oskus. Sarnaselt sellele, mis CSS Flexboxiga viimase paari aasta jooksul juhtus.

Teise võimalusena saate tutvuda kursuse eelvaatega.

Täname, et lugesite! Minu nimi on Per, olen Scrimba kaasasutaja - tööriist interaktiivsete kodeerimise ekraanisaadete loomiseks. Jälgige mind Twitteris ja Instagramis, kui soovite kontakti hoida.