11 asiaa, jotka olen oppinut lukemaan CSS-ruudukotiedot

Kuva: Alex Kunchevsky

11. kesäkuuta 2017 päätin lukea CSS-ruudukon tiedot.

Spec oli hiukan tekninen, mutta se oli ylivoimaisesti nautin eritelmä, jonka olen koskaan lukenut. Jos olet edistyneempi kehittäjä, lisää se kirjanmerkkeihin tulevia viitteitä varten.

Joten siitä onko hyötyä?

Uskon, että ero hyvien ja suurten insinöörien välillä on se, että viimeksi mainitut vievät aikaa ymmärtääksesi, mikä todella tapahtuu konepellin alla. He oppivat kuinka asiat toimivat sen sijaan, että oppia "kopioi ja liitä".

Joten haluatko olla suuri kehittäjä?

Helvetti, kyllä. Tai et lukenut tätä artikkelia.

Mitä opit

Lukeessani teknisiä tietoja olen oppinut joitain erittäin hienoisia, mutta perusteellisia yksityiskohtia.

Tässä artikkelissa jaan ne kanssasi.

1. CSS-ruudukko on deklaratiivinen

Deklaratiiviset sovellusliittymät ovat niin suloisia työskennellä. Luuletko ReactJS: n?

Verkkosivustojen kehittyessä yksinkertaisista asiakirjoista monimutkaisiksi, vuorovaikutteisiksi sovelluksiksi, verkkosivujen asettelu tuli vaikeaksi. Niin vaikeaa, he olivat painajainen.

Juuri tämä on ongelma, jonka CSS Grid on ratkaissut tänään.

Spec.

CSS-ruudukko vie älykkään asettelun muotoilun kivultaan ja korvaa sen kauniilla deklaratiivisilla säännöillä, jotka tekevät prosessista lähes vaivatonta.

Nämä ovat hyviä aikoja CSS: n historiassa.

2. Jaeyksikkö ei aina tuota tasavälein rivejä ja sarakkeita

Yksi ensimmäisistä asioista, jotka kaikki oppivat ja rakastavat CSS-verkkoon, on murto-osa. Jopa ankka voi päästä eroon siitä.

Jaeyksikkö poistaa prosentuaalisen laskennan tuskasta. On ilo työskennellä.

Useimmat ihmiset opettavat, että murto-osa (fr) tuottaa tasavälein toisistaan ​​erotetut sarakkeet tai rivit.

Esimerkiksi ilmoituksen, kuten 1fr 1fr 1fr, odotetaan antavan samat etäisyydet sarakkeet tai rivit. Katso alla olevaa kuvaa:

Yhtä etäisyydellä pylväät, jotka fraktioyksikkö on luonut.

Valitettavasti tämä ei ole aina totta. Huono ankka.

Seuraava on teknisistä tiedoista:

Fr-yksikkö täyttää käytettävissä olevan tilan, MUTTA se ei ole KOSKAAN pienempi kuin ristikon säiliön vähimmäiskoko tai rivin tai sarakkeen sisältö.

Pohjimmiltaan, jos sinulla on kuva, kuvakuva tai mikä tahansa ruudukkotieto, jolla on min-leveys tai -korkeus, voit saada odottamattomia tuloksia murto-yksiköllä.

Jälkeen löysässä kuin märkä peloitettu ankka vietin paljon aikaa kokeillakseen murto-osaa. Kirjoitin artikkelin havainnoista.

3. Et oikein tiedä kuinka ruudukot on mitoitettu. Vai voitko?

CSS-ruudukon määritelmä alkaa aina tämän riviltä:

näyttö: ruudukko

Usein sitä seuraa rivin ja sarakkeen määritelmät. Jotain tällaista:

ruudukko-malli-rivit: 10px 1fr 3fr
ruudukko-malli-sarakkeet: 1fr

Ja lopuksi, todennäköisesti sijoitat ruudukkoesineet millä tahansa sinulle sopivalla tekniikalla.

Koska ristikkokohtien sijoittamiseen on monia tapoja, ohitan tarvittavan koodin lyhyyden vuoksi.

Joten, tässä on ongelma.

Kupun alla täytyy olettaa, että ruudukkorivien ja -sarakkeiden koko lasketaan ensin ennen esineiden sijoittamista. Oikea?

No, näyttää siltä, ​​että totuus on täysin päinvastainen.

Kuinka outoa.

Seuraava on teknisistä tiedoista:

2.3. Ruudukon mitoittaminen
Kun ruudukkokohdat on asetettu, ruudukkoratojen (rivit ja sarakkeet) koot lasketaan ottaen huomioon niiden sisällön ja / tai käytettävissä olevan tilan koko ruudukon määritelmän mukaisesti.

Huomaa eteneminen.

  1. Ristikon osat asetetaan paikalleen.
  2. Ruudukkoratojen koot lasketaan

Sinulla on todennäköisesti kysymyksiä tästä. Joten yritän ratkaista nämä huolenaiheesi.

Huomaa ensin, että jokaiselle ruudukkoelementille on annettu ruudukko-alue. Ristikkokohteet mitoitetaan sitten tällä alueella. Joten kuinka ruudukkoelementit tarkalleen sijoitetaan laskematta jo kappaleiden kokoa?

Jos katsot eritelmän Sijoittaminen ruudukko-osia, löydät vihjeen.

Ristikkojen mitoituksessa otetaan paljon huomioon, ja se sisältää suurelta osin ruudukkoesineiden koon.

Mitoitusruudut voivat perustua seuraaviin:

  • Kiinteä mitoitusfunktio (pituus tai määritettävä prosenttimäärä).
  • Luonnollinen mitoitusfunktio (min-sisältö, enimmäissisältö, automaattinen, sovi-sisältö ()) tai
  • Joustava mitoitustoiminto (flex).

Mielestäni hupun alla tapahtuu, että ristikkokohteet on asetettu.

Toisin sanoen määritetään esineen sisältävä lohko, sitten määritetään kappaleen mitoitusfunktio. Tämä puolestaan ​​vaikuttaa ruudukon ratojen kokoon.

Sinä näet?

Ei sitä, mitä alun perin ajatteli.

4. Oletuksena ruudukkokappaleet venytetään sopimaan ruudukkoalueelleen - paitsi tietyissä tapauksissa

Ilman interventiota ruudukkoesineet venyvät aina sopimaan ruudukkoalueelleen.

Joten, jos sinulla olisi tällainen ilmoitus:

ruudukko-malli-alueet: 'otsikon otsikon otsikko'
                     'sivupalkin pääpää'
                     'sivupalkin alatunniste'

Ja sinulla oli divs-osoitteet tietyille verkkoalueille, kuten:

.div1 {
   ruudukon alue: otsikko
}
.div2 {
   ruudukon alue: sivupalkki
}
.div3 {
   ruudukon pinta-ala: pää
}
.div4 {
   ruudukon alue: alatunniste
}

Sinun ei tarvitse ilmoittaa yllä olevien väliseinien leveyttä ja korkeutta 100%: iin

Ne venyvät automaattisesti täyttääkseen kunkin alueensa.

Nyt, tässä on saalis.

Tämä käyttäytyminen on ristiriidassa Kuvien kanssa.

Kuten Rachel Andrew huomautti, spec jatkaa sanoen, että tämä käyttäytyminen on erilainen ruudukkoyksiköissä, joilla on sisäinen kuvasuhde.

Älä anna isojen sanojen pelottaa sinua. Se ei ole demogorgon.

Kuva on oletuksena inline-block-elementti, mutta niillä on myös tietyt mitat. Heillä on luonnollisesti ulottuvuus niihin. Kuvan leveys voi olla 400x600xx tai mikä tahansa mitta.

Säännöllisillä lohkoelementeillä, kuten divs, ei kuitenkaan ole sisäisiä mittoja. Toisin sanoen heillä ei ole ulottuvuuksia, jotka kuuluvat luonnollisesti heihin.

Joten, vaikka ruudukkoelementit, joilla ei ole sisäisiä mittoja, venyvät sopimaan ruudukkoalueelleen, tämä ei pidä paikkaansa ruudukkokappaleita, joilla on sisäinen ulottuvuus, esim. Kuvia.

5. Tiedätkö todella mitä ruudukkoesine on?

Mieti alla olevaa koodilohkoa:

    
lohko     
kellua         Olen satunnainen teksti              kohta 4     

Yllä olevassa koodilohossa voit havaita ruudukkoyksiköt?

Kuinka monta ruudukkoelementtiä on koodilohossa, 3 tai 4?

Epäonnisin tämän kysymyksen räikeästi.

Huomaa, että satunnainen teksti ei ole minkään HTML-tunnisteen kääritty.

kumpi se on?

Joten, mikä on vastauksesi?

No, jos vastasit 3, olet väärässä. Haha, saitko!

Teknisten tietojen mukaan nimettömänä oleva ruudukkoyksikkö kiedotaan jokaisen ruudukossa olevan tekstirivin ympärille.

Kyllä, se tarkoittaa, että olen sattumanvarainen teksti, on myös ruudukkokokoelma.

lohko     
kellua
    
    Olen satunnainen teksti

    
        kohta 4
    

Joo, vastaus on 4. Meillä on 3 nimenomaista ruudukkotietoa ja 1 tuntematon ruudukkokokoelma!

Saitko sen?

6. Vierekkäisten ristikkokohtien marginaalit eivät romahta.

Lohkoelementtien ja ruudukkorasioiden välillä on suuria eroja.

Tarkoitan seuraavaa: elementti, jolla on näyttö: lohko ja toinen näyttö: ruudukolla, on paljon perustavanlaatuisia eroja.

Erona, jonka valitsen keskustella täällä, on tekemistä kokoontaitettavien marginaalien kanssa.

Yksi ensimmäisistä asioista, jotka opit CSS: n avulla, on kokoontaitettavien marginaalien käsite. En halua viettää paljon aikaa selittämällä, mitä kokoontaitettavat marginaalit tarkoittavat. Jos esität sen kommentteihin, aion.

Joten, takaisin verkkoihin.

Jokaisessa ruudukkoerässä marginaalit eivät koskaan pienene.

No, tämä on ymmärrettävää. Annan näyttää sinulle miksi.

Vierekkäiset ristikkokohteet sisältyvät itsenäisesti sisältävään lohkoon, jonka niiden ruudukkoalueet muodostavat.

Mitä tämä monimutkainen kohta edellä tarkoittaa, on tämä. Jokainen ruudukkoesine elää ja hengittää ruudukkoalueella

Ristikkokohteet sijoitetaan vastaaville ruudukkoalueilleen. He oleskelevat omilla häiriöttömillä alueillaan. Kokoontaitettavat marginaalit eivät vaikuta niihin. Kuinka siistiä.

Joten teknisesti voidaan sanoa, että ruudukkoesine ei ole muiden ruudukkokappaleiden välitön naapuri. Mutta se sisältyy keskeytymättömään suljettuun alueeseen - verkkoon.

Jos olet kiinnostunut, mitä muita eroja on lohkoelementtien ja ruudukkoelementtien välillä, kirjoitin mielenkiintoisen artikkelin aiheesta.

7. automaattinen täyttö ja automaattinen sovitus. Mitä eroa?

Vaikka automaattinen täyttö ja automaattinen sovitus näyttävät samoilta toiminnoilta, ne eroavat tavalla.

Ne ovat samanlaisia ​​siinä mielessä, että ne sallivat automaattisesti ruudukkokappaleiden luomisen, jotka täyttävät ruudukkonäytön jollain tavalla.

Esimerkiksi seuraava koodi luo niin monta 200 pikselin saraketta kuin mahtuu ikkunan leveyteen. Jos tilaa on jäljellä, se jaetaan 200 pikselin sarakkeiden kesken.

vartalo {
  näyttö: ruudukko;
  ruudukko-malli-sarakkeet: toista (automaattinen täyttö, minmax (200px, 1fr));
}

Mitä eroa?

automaattinen täyttö luo raitoja, vaikka mitään ruudukkokohtaa ei täytettäisi. automaattinen sovitus ei tee tätä. Se tyhjentää tyhjät kappaleet nollaan.

Siinä kaikki.

8. Ruudukkopohja-alueiden määritelmässä merkkijonon sanamäärän PITÄÄ olla sama.

Muistatko omituiset grid-mallipinta-alueiden arvot, jotka näyttävät kartalta?

No, näyttää siltä, ​​että se voi sotkea asiat todella nopeasti.

Ruudukon mallipinta-alueilmoituksessa kaikilla merkkijonoilla on oltava sama määrä sarakkeita, muuten ilmoitus on virheellinen.

Esimerkiksi:

/ * tämä on voimassa * /
ruudukko-malli-alueet: "otsikon otsikon otsikkopalkki"
                     "main main main sidebar"
                     "main main main sidebar"
/* Tämä on väärin */
ruudukko-malli-alueet: "otsikon otsikon otsikkopalkki"
                     "main main main sidebar"
                     "pääsivupalkki"

Merkkijonojen sanamäärän on oltava yhtä suuri.

9. Vältä prosenttimäärien käyttämistä tyynyissä tai reunuksissa kokonaan ruudukkoesineissä

CSS-ruudukosta Spec

Syy tähän on yksinkertainen. Tätä kirjoitettaessa saat erilaisen käytön eri selaimissa.

Specifikaation mukaan prosenttiosuus voidaan erottaa joko pelkästään elementin leveydestä tai vasen / oikea marginaali leveyteen nähden, kun ylä / ala on erotettu korkeuteen nähden

Jotta hakutoiminnot olisivat yhdenmukaisia ​​useimmissa selaimissa, vältä prosenttiosuuksien käyttämistä ruudukkojen pehmusteissa tai reunuksissa.

Vielä tärkeämpää on, että CSS-ruudukossa on jo muutamia hämmentäviä bittejä. Älä ammu itsesi jalkaan prosenttimäärällä pehmusteita tai marginaaleja ruudukkoesineissä.

10. Kuinka selkeän ruudukon koko ratkaistaan, kun on olemassa ristiriita?

Oletetaan, että sinulla on ruudukkoilmoitus kuten:

ruudukko-malli-alueet: "otsikon otsikon otsikkopalkki"
                     "main main main sidebar"
                     "main main main sidebar"

Yllä olevassa koodilohossa on 4 saraketta ja 3 riviä.

Entä jos tekisit myös tämän:

ruudukko-malli-sarakkeet: toista (5, 1fr)
ruudukko-malli-rivit: toista (4, 1fr)

Nyt sinulla on enemmän sarakkeita ja rivejä. 5 saraketta ja 4 riviä.

Onko sinulla?

Julistuksissa on nyt ristiriita. Joten miten tämä ratkaistaan?

Specifikaation mukaan nimenomaisen ruudukon koko määräytyy sen mukaan, kumpi on suurempi rivien / sarakkeiden määrästä, jotka on määritelty ruudukko-malli-alueilla, ja niiden rivien / sarakkeiden määrästä, jotka on mitoitettu ruudukko-malli-riveillä / ruudukon ja mallin sarakkeilla. .

Spec voivat tuntua monimutkaiselta yksinkertainen asia. Mitä tämä tarkoittaa yksinkertaisella kielellä, se deklaraatio, jolla on enemmän rivejä tai sarakkeita, voittaa.

Yllä olevassa esimerkissä ruudukko vie 5 saraketta ja 4 riviä EI 4 saraketta ja 3 riviä.

* MUOKKAA: Ruudukko-malli-alueet -ominaisuutta käytetään ruudukkoyksiköiden sijoittamiseen ruudukkoon. Joten miksi meidän pitäisi olla ristiriidassa verkon määrittelyn kanssa? Eivätkö ruudukot ole tarkoitus määritellä vain ruudukko-malli-sarakkeilla ja ruudukko-malli-riveillä? Vastaan ​​tähän kommenttiosassa. Tarkista se.

11. Ruudukon koko ei ole puhtaasti raitekoon summa

Ruudukon raidat viittaavat ruudukkoviivojen väliseen etäisyyteen.

Vaikka tämä on yksinkertaista, on syytä mainita tapaus, jossa olet asettanut kiinteän leveyden ruudukon.

Ruudukon kokoon voivat vaikuttaa ruudukon riviväli, ruudukon pylväsväli ja perustella sisältö, kohdistaa sisältö. Mikä valitettavasti voi lisätä ylimääräistä tilaa kappaleiden väliin.

Joten ole varovainen laskettaessa kiinteitä leveyksiä ruudukossa.

BONUS: Me kaikki voimme myötävaikuttaa DOCS: n parantamiseen

Koska olen kiltti sielu, olen lisännyt tähän vielä yhden vinkin

Spec ovat kirjoittanut ihmiset. Ja niin tapahtuu, että ihmiset voivat tehdä virheitä.

Lukiessani spesifikaatiota, huomasin pienen kirjoitusvirheen.

Tuolloin en ollut erityisen varma mitä tehdä. Joten kysyin Twitterissä.

Sellainen Jen Simmons auttoi arkistoimaan ongelman githubiin, ja se korjataan.

Joten mikä on moraali?

Voit auttaa tekemään dokumentteja paremmiksi osallistumalla millä tahansa tavalla mahdollista.

Kyllä sinä!

Tehdään verkko yhdessä paremmiksi.

Haluatko tulla Pro: ksi?

Lataa ilmainen CSS Grid -oppaani ja hanki kaksi ilmaista interaktiivista Flexbox-kurssia ilmaiseksi!

Kuinka hallita CSS-ruudukko ja mitä rakentaa matkan varrella (ilmainen PDF-opas)

Hanki heidät nyt