Varmista, että asettelusi ovat täysin reagoivia vaihtoehtoisella mittausyksiköllä.

Ei kauan sitten, olimme täysin riippuvaisia ​​leveys- ja korkeusprosenttien käytöstä. Prosenttiosuuksien käyttäminen tarkoitti, että asettelusi ja elementtesi saattoivat olettaa korkeuden ja leveyden näkymän perusteella. Mutta kun moderni CSS jatkaa kehittymistä, olemme päässeet pisteeseen, jossa saattaa jopa olla hyvä idea välttää prosenttiosuuksien käyttöä.

Opi yleisistä ongelmista, joita kohtaat prosenttiosuuksia käyttäessäsi. Tutustu myös nykyaikaisiin CSS-tekniikoihin, joita voidaan käyttää prosenttiosuuksien sijasta. Nämä tekniikat antavat sinulle saman tuloksen kuin prosenttiosuudet ilman haittoja.

Hyvin yksinkertainen ruudukkoesimerkki

Jos haluat osoittaa ongelman prosenttiyksiköiden kanssa, harkitse tätä HTML-asettelua:

<divluokkaa="konttiminun ruudukko">
 <divluokkaa="ruudukkokohde">
div>
 <divluokkaa="ruudukkokohde">
div>
div>

Ulkoelementti on peruselementti div säiliöelementti kahdella div lapset. Jokaisella lapsella on a

ruudukkokohde luokkaa. Säilön muuttamiseksi ruudukoksi, jossa on kaksi saraketta (kaksi ruutua), meidän on käytettävä seuraavaa CSS-koodia:

kehon {
taustaväri: musta;
kohdista kohteet: keskusta;
perustele-sisältö: flex-start;
}
.oma-ruudukko {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: 50% 50%;
marginaali: 3rem;
rajaa: 2pxkiinteäkulta;
pehmuste: 1rem;
}
.grid-item {
rajaa: 3pxkiinteäkulta;
pehmuste: 10rem 0;
tausta: sininen;
}

Jokaisella sarakkeella (ruudukkokohdalla) on kullan taustaväri. Säilön yläluokkaan määritimme ruudukko-malli-sarake 50 prosenttiin jokaiselle sarakkeelle. Tämän seurauksena molemmat laatikot vievät 50 % säiliöelementin kokonaisleveydestä.

Tässä tulos:

Mutta tässä linjauksessa on ongelmia. Ensinnäkin, jos päätit lisätä a aukko ruudukon vanhemmalle, lapsi voi vuotaa yli sivulta. Esimerkiksi jos lisäisit rako: 3px kohtaan .oma-ruudukko lohko CSS: ssä, asettelu näyttäisi tältä:

Kuten yllä olevasta kuvasta näkyy, oikea laatikko on siirtynyt pois säiliöstä. Joskus et ehkä huomaa sitä, koska rako on tarpeeksi pieni, mikä johtaa oudoon kohdistusongelmaan. Mutta jos sinulla oli suurempi aukko, päällekkäisyys tulee melko ilmeiseksi.

Aina kun käytät prosentteja ja lisäät marginaaleja tai aukkoja, on suuri mahdollisuus kohdata tällaisia ​​virheitä. Mutta miksi virhe ilmenee?

Tämä johtuu siitä, että jokainen sarake on 50 % ylätasosta. Yllä olevassa esimerkissä meillä on 50 % plus 50 % plus tämä rako (3px), joka työntää laatikon ulos säiliöstä.

Huomaa, että tämä virhe ei tapahdu vain 50-50. Voit asettaa ensimmäisen sarakkeen arvoksi 75 %, toisen sarakkeen arvoksi 25 % ja virhe ilmenee edelleen. Tästä syystä sinun on käytettävä seuraavaa ratkaisua useammin.

Ratkaisu murto-arvoilla

Ratkaisu on käyttää murto-osia prosenttiosuuksien sijaan. Joten sen sijaan, että asettaisit ensimmäisen sarakkeen arvoksi 75 % ja toiseksi 50 %:ksi, voit asettaa ensimmäisen sarakkeen arvoon 3fr ja toiseen sarakkeeseen 1fr:

ruudukko-malli-sarakkeet: 3fr 1fr

Tämä säilyttää saman suhdeluvun kuin ensimmäisessä esimerkissä. Mutta käytön etu fr yksikköä on, että ne käyttävät murto-osan käytettävissä olevasta tilasta. Tässä tapauksessa ensimmäinen sarake vie kolme osaa tilasta, kun taas toinen sarake yhden osan, ei sisällä aukkoa.

Toinen etu frs: n käyttämisestä prosenttiosuuksiin tai muihin verrattuna absoluuttiset yksiköt, kuten px tai em– Voit yhdistää ne kiinteisiin arvoihin. Tässä on esimerkki:

ruudukko-malli-sarakkeet: 1fr 10rem;

Yllä olevalla koodilla saat kiinteän arvon, joka ei koskaan muutu näytön koosta riippumatta. Tämä johtuu siitä, että oikeanpuoleinen sarake pysyy aina 10 remissä, kun taas vasemmanpuoleinen sarake vie jäljellä olevan tilan (ilman aukkoa).

Joskus voit päästä eroon prosenttiosuuksista. Mutta sinun on käytettävä niitä älykkäillä tavoilla, jotka voivat silti mukautua tilanteeseen. Usein tämä tarkoittaa niiden yhdistämistä pariksi fr arvo.

Realistisempi esimerkki

Kuvittele, että sinulla on sivu, joka sisältää pääsisältöalueen ja sivun (aiheeseen liittyville viesteille). Pääsisältöalue vie kolme murto-osaa ruudusta, kun taas sivu vie jäljellä olevan tilan miinus aukko:

.container {
leveys: 100%;
näyttö: ruudukko;
ruudukko-malli-sarakkeet: 3fr 1fr;
aukko: 1.5 rem;
}
.kortti {
taustaväri: #5A5A5A;
pehmuste: 10px;
marginaali-ala: .5 rem;
}

Tässä tulos:

Yleensä siirrät sivupalkin (tai sivuun) sivun alaosaan (tai yläosaan), kun näytöstä tulee liian kapea. Tämä tarkoittaa mediakyselyjen määrittämistä, jotka pinoavat kaiken päällekkäin, kun näkymä saavuttaa tietyn keskeytyskohdan.

Näin voit pinota kaiken sarakkeeseen, kun näkymä saavuttaa 55 em tai vähemmän:

@media(maksimileveys: 55 em) {
.container {
näyttö: flex;
flex-suunta: sarakkeessa;
 }
}

Ja tulos näyttää suunnilleen tältä:

Nyt et halua jokaisen kortin ulottuvan koko näkymän leveydelle. Sen sijaan korttien tulisi näkyä vierekkäin. Paras tapa saavuttaa tämä on CSS-ruudukot. Mutta sen sijaan, että asetat kiinteitä leveysarvoja (kuten 50 %) grid-template-sarakkeelle, käytä toistaa() toimi seuraavasti:

.sidebar-grid {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: toistaa(automaattinen sovitus, minmax(25rem, 1fr));
kohdista-sisältö: alkaa;
aukko: 2rem;
}

Tämä CSS asettaa vähimmäiskoon 25 rem ja enimmäiskoon 1 fr. Tämä lähestymistapa on paljon parempi kuin kiinteiden leveuksien asettaminen, koska se perustuu luontaiseen kokoon. Toisin sanoen se antaa selaimen selvittää asiat käytettävissä olevien parametrien perusteella.

Nyt kun pienennät selainikkunaa tietylle leveydelle, ruudukkoruutu muuttuu automaattisesti kahdeksi ruuduksi riviä kohden.

Kun näyttö pienenee, se putoaa yhteen ruutuun riviä kohden. Joten selain pinoaa kaiken päällekkäin. Kaikki tämä tapahtuu, kun muutat ikkunan kokoa. Voit käyttää selaimen ominaisuuksia, kuten Chrome DevTools ymmärtääksesi, miten tämä CSS toimiija kuinka ikkunoiden koon muuttaminen muuttaa asettelua.

Parasta on, että et tarvitse säilökyselyä tai mitään hienoa tehdäksesi elementistä reagoivan. Aseta vain ruudukko ja käytä min-max() asettaaksesi murto-osia kiinteiden kokojen sijaan.

Lisätietoja CSS Gridistä

Jos haluat olla loistava CSS: n kanssa, sinulla on oltava syvä CSS-ruudukoiden tuntemus. Ristikot voivat olla varsin tehokkaita, kun niitä käytetään hyvin. Voit saavuttaa melkein minkä tahansa haluamasi asettelun käyttämällä ruudukkoa. Tämä tekee siitä korvaamattoman työkalun CSS: ssä.

Yksi asia, joka on pidettävä mielessä CSS-ruudukoita käytettäessä, on keskittyä reagointikykyyn. Voit myös käyttää murto-osamenetelmää elementtien välisten törmäysten välttämiseksi. Muista hallita CSS-ruudukot, koska asettelutyyli auttaa sinua valtavasti verkkosivustojen luomisessa.