Kuinka tehdä HTML-koodistasi reagoiva lisäämällä yksi rivi CSS: tä

Kuva TJ Holowaychuk

Tässä artikkelissa opetan sinulle, kuinka CSS-ruudukkoa käytetään luomaan erittäin viileä kuvaruudukko, joka muuttaa sarakkeiden määrää näytön leveyden mukaan.

Ja kaunein osa: reagoivuus lisätään yhdellä rivillä CSS: ää.

Tämä tarkoittaa, että meidän ei tarvitse sietää HTML: ää rumailla luokanimillä (ts. Col-sm-4, col-md-8) tai luoda mediakyselyjä jokaiselle näytön koolle.

Olen myös luonut ilmaisen CSS Grid -kurssin. Napsauta tätä saadaksesi täyden pääsyn siihen.
Napsauta kuvaa päästäksesi kurssille.

Hyppäämme nyt siihen!

Asennus

Jatkamme tämän artikkelin suhteen ruudukkoon, jota käytimme ensimmäisessä CSS-ruudukkoartikkelissani. Lisäämme sitten kuvat artikkelin loppuun. Alkuperäinen ruudukko näyttää tältä:

Tässä on HTML:

  
1   
2   
3   
4   
5   
6

Ja CSS:

.container {
    näyttö: ruudukko;
    ruudukko-malli-sarakkeet: 100 pikseliä 100px 100px;
    ruudukko-malli-rivit: 50 kuvapistettä 50 kuvapistettä;
}
Huomaa: esimerkissä on myös vähän perusmuotoilua, jota en käy täällä, koska sillä ei ole mitään tekemistä CSS Gridin kanssa.

Jos tämä koodi hämmentää sinua, suosittelen lukemaan Opi CSS-ruudukko 5 minuutissa -artikkeli, jossa selitän asettelumoduulin perusteet.

Aloitetaan tekemällä sarakkeet reagoivia.

Perusvaste fraktioyksiköllä

CSS Grid tuo mukanaan kokonaan uuden arvon, nimeltään murto-yksikkö. Jaeyksikkö on kirjoitettu kuten fr, ja sen avulla voit jakaa säiliön niin moniin fraktioihin kuin haluat.

Muutetaan jokainen sarake yhdeksi murtoyksikön leveydeksi.

.container {
    näyttö: ruudukko;
    ruudukko-malli-sarakkeet: 1fr 1fr 1fr;
    ruudukko-malli-rivit: 50 kuvapistettä 50 kuvapistettä;
}

Tässä tapahtuu, että ruudukko jakaa koko leveyden kolmeen osaan ja kukin sarake vie yhden yksikön. Tässä on tulos:

Jos muutamme ruudukon mallipohjaisten sarakkeiden arvoksi arvoon 1f 2fr 1fr, toinen sarake on nyt kaksi kertaa leveämpi kuin kaksi muuta saraketta. Kokonaisleveys on nyt neljä murtoyksikköä, ja toinen vie niistä kaksi, kun taas toiset vievät kumpikin yhden. Näin se näyttää:

Toisin sanoen murto-yksikköarvon ansiosta pylväiden leveyden muuttaminen on erittäin helppoa.

Edistynyt reagointikyky

Yllä oleva esimerkki ei kuitenkaan anna meille haluamaasi vastausta, koska tämä ruudukko on aina kolmen sarakkeen leveä. Haluamme ruudukkojamme muuttavan sarakkeiden määrän säiliön leveyden mukaan. Tämän saavuttamiseksi sinun on opittava kolme uutta konseptia.

toistaa()

Aloitamme toista () -toiminnolla. Tämä on tehokkaampi tapa määrittää sarakkeet ja rivisi. Otetaan alkuperäinen ruudukko ja muutetaan se käyttämään toista ():

.container {
    näyttö: ruudukko;
    ruudukko-malli-sarakkeet: toista (3, 100 px);
    ruudukko-mallirivit: toista (2, 50xx);
}

Toisin sanoen toista (3, 100px) on identtinen 100px 100px 100px. Ensimmäinen parametri määritteli kuinka monta saraketta tai riviä haluat, ja toinen määrittelee niiden leveyden, joten tämä antaa meille täsmälleen saman asettelun kuin aloitimme:

automaattinen sovitus

Sitten on automaattinen istuvuus. Hyppäämme käyttämään kiinteää määrää sarakkeita ja korvaa pikemminkin 3 automaattisen sovituksen.

.container {
    näyttö: ruudukko;
    ristikkorako: 5px;
    ruudukko-malli-sarakkeet: toista (automaattinen sovitus, 100px);
    ruudukko-malli-rivit: toista (2, 100 kuvapistettä);
}

Tämä johtaa seuraavaan käyttäytymiseen:

Ristikko muuttaa nyt sarakkeiden määrää säiliön leveyden mukaan.

Se yksinkertaisesti yrittää sovittaa niin monta 100 pikselin leveää saraketta säilytysastiaan kuin mahdollista.

Jos koodaamme kaikkien sarakkeiden olevan tarkalleen 100px, emme koskaan saa haluamaasi joustavuutta, koska ne kasvavat harvoin koko leveyteen. Kuten yllä olevasta gifistä voidaan nähdä, ruudukko jättää usein valkoisen tilan oikealla puolella.

MinMax ()

Viimeistä ainesosaa, jota tarvitsemme tämän korjaamiseksi, kutsutaan minmax (). Korvaamme yksinkertaisesti 100 kuvapisteen minimiarvoilla (100 kuvapistettä, 1fr). Tässä on viimeinen CSS.

.container {
    näyttö: ruudukko;
    ristikkorako: 5px;
    ruudukko-malli-sarakkeet: toista (automaattinen sovitus, minmax (100px, 1fr));
    ruudukko-malli-rivit: toista (2, 100 kuvapistettä);
}
Huomaa, että kaikki reagoivuus tapahtuu yhdessä CSS-rivissä.

Tämä johtaa seuraavaan käyttäytymiseen:

Ja kuten näette, se toimii täydellisesti. Minmax () -toiminto määrittelee kokoalueen, joka on suurempi tai yhtä suuri kuin min ja pienempi tai yhtä suuri kuin max.

Joten sarakkeiden koko on nyt ainakin 100 kuvapistettä. Jos tilaa on kuitenkin enemmän, ruudukko jakaa sen vain tasaisesti jokaiselle sarakkeelle, koska sarakkeet muuttuvat murtoyksiköksi 100 pikselin sijasta.

Kuvien lisääminen

Nyt viimeinen vaihe on lisätä kuvia. Tällä ei ole mitään tekemistä CSS Gridin kanssa, mutta katsotaan silti koodia.

Aloitamme lisäämällä kuvalaatikon jokaiseen ruudukkoon.

Jotta kuva mahtuu esineeseen, asetamme sen olemaan yhtä leveä ja pitkä kuin esine itse, ja käytämme sitten object-fit: cover ;. Tämä saa kuvan peittämään koko säiliön ja selain rajaa sen tarvittaessa.

.container> div> img {
    leveys: 100%;
    korkeus: 100%;
    esine sopii: kansi;
}

Mikä päättyy seuraavaan:

Ja siinä kaikki! Tunnet nyt yhden CSS-ruudukon monimutkaisimmista käsitteistä, joten anna itsellesi selitys.

Selaimen tuki

Ennen kuin lopetamme, minun on mainittava myös selaimen tuki. Tämän artikkelin kirjoittamishetkellä 77% maailmanlaajuisesta verkkosivustojen liikenteestä tukee CSS Gridia, ja se on kiipeämässä.

Uskon, että vuosi 2018 on CSS Grid -vuosi. Se saa läpimurtonsa ja muuttuu välttämättömäksi taitoksi käyttöliittymäkehittäjille. Aivan kuten CSS Flexboxin kanssa tapahtunut pari viime vuotta.

Vaihtoehtoisesti voit tutustua kurssin esikatseluun.

Kiitos lukemisesta! Nimeni on Per, olen Scrimban perustaja, työkalu interaktiivisten koodausnäyttöjen luomiseen. Seuraa minua Twitterissä ja Instagramissa, jos haluat pitää yhteyttä.