„CSS Grid“ vadovas pradedantiesiems

Grego Rakozy nuotrauka „Unsplash“

Pirmą kartą apie „CSS Grid“ išgirdau 2016 m. Pabaigoje. Sėdėjau viename iš savo pirmųjų „Tech Ladies®“ susitikimų ir vienas dalyvis užsiminė apie tai, kaip nuostabu. Greitai į priekį po pusantrų metų ir aš pagaliau gilinuosi į Tinklelį. Kaip atsidavęs „Flexbox“ vartotojas, jau galiu pasakyti, kaip tai bus žaidimų keitiklis.

Didžiausias klausimas, kurį turėjau pradėjęs sužinoti apie CSS Tinklelį, buvo: kuo Tinklelis skiriasi nuo „Flexbox“? Ir aš sužinojau, kad apskritai „Grid“ gali padaryti viską, ką gali padaryti „Flexbox“. Kai kurie žmonės mano, kad „Tinklelis“ yra skirtas daugiamatiams maketams, o „Flexbox“ turėtų būti naudojamas vieno matmens maketams. Tačiau „Grid“ puikiai tinka ir vienmatėse schemose - ypač jei grįšite vėliau ir nuspręsite, kad norite, kad tas išdėstymas būtų daugiamatis.

CSS tinklo nustatymas

Tinklelį labai lengva nustatyti - viskas, ko reikia, yra dvi CSS eilutės.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.vyniojamasis popierius {
    ekranas: tinklelis;
    tinklelio, šablono, stulpeliai: 10rem 10rem 10rem;
}

Ir voila! Jūs turite tinklelį. Rimtai, tai yra viskas, ko jums reikia. Tai gana puiku.

Pastebėsite, kad skirtingai nei nustatant „Flexbox“ ekranui: lanksčiam, pridedant ekraną: tinklelį prie savo vyniojamojo popieriaus, tai iškart nepasikeičia. Taip yra todėl, kad jūs tiksliai neapibrėžiate, kiek stulpelių norite turėti tinklelyje. Tai atliksite naudodami tinklelio, šablono, stulpelius, kaip tai dariau aukščiau. Taigi šiame pavyzdyje aš nustatau tris stulpelius, kurių kiekvieno plotis yra 10rem.

Pagrindinis CSS tinklelis

Nustatydami tinklelio, šablono, stulpelius, galite naudoti bet kurią norimą vertę, tačiau aš siūlau atsiriboti nuo procentų, nebent bandote pridėti iki 100%. Taip yra todėl, kad turėsite atsižvelgti į tinklelio spragą (į kurią mes šiek tiek pasinervinsime), ir tai gali būti šiek tiek sudėtinga.

Aiškūs ir numanomi takeliai

Prieš pradėdamas kalbėti apie tiesioginius ir numanomus takelius, pirmiausia pakalbėkime apie tai, kas yra takeliai. Maršrutai yra tai, kaip sunumeruojami stulpeliai ir eilutės. Užuot skaičiavę atskiras stulpelius ir eiles patys, „CSS Grid“ skaičiuosite juos pagal maršruto linijas. Štai tinklelis, kurį mes pradėjome - aš sunumeravau visas takelių eilutes ir stulpelius, kad jums būtų šiek tiek lengviau juos pamatyti.

CSS tinklelis su stulpelių linijomis ir eilučių eilėmis sunumeruotas

Galite pamatyti, kad mes iš tikrųjų turime keturias stulpelių eilutes ir tris eilutes. Tai padės įdedant daiktus į tinklelį.

Trumpas šaltinis: jei naudojate „Firefox“ kūrėjų leidimą (įprastos „Firefox“ beta versiją), jis iš tikrųjų turi keletą puikių dev įrankių, skirtų stulpelių ir eilių takelių numeriams pamatyti. Jei apžiūrėsite savo įvyniojimo elementą ir tada eisite į išdėstymo skirtuką, pažymėkite aplanko langelį ir dabar jūsų tinklelis atrodys žemiau! Labai tikiuosi, kad „Chrome“ ateityje pridės tokią patikrinimo funkciją. Tai labai naudinga.

„Firefox“ kūrėjų leidimo inspektoriaus įrankiai

Grįžkime prie skirtumo tarp aiškių ir numanomų takelių. Jei paimsime savo kodą iš viršaus, pastebėsite, kad nustatėme tik stulpelius. Šiuo atveju mes aiškiai nustatėme, kad mūsų stulpeliai būtų trys, bet mes netiesiogiai nustatėme savo eiles. Turime šešis elementus, bet akivaizdu, kad visi šie elementai negali tilpti į tris stulpelius, todėl antroji eilutė yra numanoma.

Tai šiek tiek klaidina, todėl neabejotinai rekomenduoju pačiam susipainioti su CSS Grid, kad pamatytumėte aiškių ir numanomų takelių skirtumą.

„Grid-Gap“ pridėjimas

Pagalvokite apie tinklelio tarpą, pavyzdžiui, paraštę, išskyrus tai, kad jis bus dedamas tik tarp elementų, o ne į tinklelio išorę. Man teko susidurti su tiek daug atvejų, kai „Flexbox“ tinklelio elementams pridedu paraštę tik tam, kad turėčiau eiti į tinklelio įvyniojimą ir nustatyti tą pačią, tačiau neigiamą, paraštės sumą, kad kompensuotume paraštę, kuri gaunama už tinklelio. Laimei, su CSS Grid, jums nereikia to spręsti.

Paimkime aukščiau pateiktą CSS pavyzdį ir pridėkime šiek tiek tarpelio.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio, šablono, stulpeliai: 10rem 10rem 10rem;
  tinklelio tarpas: 1rem;
}
CSS tinklelis su 1rem tarpus

Aš naudojau sutrumpintą ypatybę tinklelio tarpas, bet jūs galite apibrėžti aiškią stulpelių ir eilučių vertę naudodami tinklelio-stulpelio-tarpo ir tinklelio-eilutės tarpą.

* Pastaba: „Chrome 66“ pakeis tinklelio atotrūkį į atotrūkį, o tinklelio stulpelio tarpą / tinklelio eilutės tarpą į stulpelio tarpą / eilutės tarpą.

Pakartojimo () funkcija

Gana paprasta apibrėžti, kokio pločio norite būti kiekvienas stulpelis, kai naudojate tinklelio-šablono stulpelius su trimis vienodu pločiu stulpeliais. Bet tai daug rašoma, jei norite daugiau stulpelių. Čia įsijungia pakartojimo () funkcija.

Štai mūsų pavyzdys, kurį mes panaudojome pridėdami pakartojimo () funkciją.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio-šablono-stulpeliai: pakartokite (3, 10rem);
  tinklelio tarpas: 1rem;
}

Kaip matote mano CSS, aš nustatau tris stulpelius, kurių kiekvieno plotis yra 10 kampų. Ši tinklelis atrodys tiksliai taip, kaip parodyta mūsų tinklelio spragos pavyzdyje. Naudodamiesi pakartojimo () funkcija, mes tiesiog padarome dalykus paprasčiau ir lengviau skaitomus, kai norite nustatyti daugybę stulpelių.

Trupmeniniai vienetai

Daliniai vienetai, arba fr, yra naujas CSS ilgio vienetas, pristatytas su CSS Tinkleliu, ir kurį aš galiu matyti naudodamas visą laiką. Tarkime, kad norime trijų vienodo pločio stulpelių. Užuot nustatydami plotį: apskaičiuokite (100% / 3) elementams, galime naudoti trupmeninius vienetus. Sugalvokite trupmeninius vienetus kaip „laisvą erdvę“.

Tęskime mūsų pavyzdį, kurį mes naudojome.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio, šablono, stulpeliai: 1fr 1fr 1fr;
  tinklelio tarpas: 1rem;
}

Pastebėsite, kad vienintelis dalykas, kurį pakeičiau, buvo tinklelio, šablono ir stulpeliai. Dabar sakau naršyklei, kad noriu trijų stulpelių ir noriu, kad kiekviename stulpelyje būtų vienas trupmeninis vienetas arba viena „laisva vieta“. Tai veikia labai panašiai kaip „Flexbox“ lanksčiai augantis turtas.

CSS tinklelis, naudojant trupmeninius vienetus

Priežastis, kodėl kiekvienas elementas yra šiek tiek platesnis nei ankstesniame pavyzdyje, yra ta, kad dabar jie užima tiek vietos, kiek gali, kol vis tiek telpa į tris stulpelius. Šiuo atveju aš nenustačiau kietojo pločio, todėl jie užima visą mano ekrano plotį. Aš žinau, kad tai sunku pastebėti neturint savo ekrane, todėl neabejotinai rekomenduoju tai padaryti pats.

Taip pat nereikia nustatyti, kad visi stulpeliai būtų 1f. Žemiau yra pavyzdys, kai aš nustatiau savo pirmąjį ir trečiąjį stulpelius į 10 rems, o mano vidurinis stulpelis yra 1fr. Taip pat galite nustatyti stulpelius į 2fr, 3fr ir pan., Ir stulpelio elementai užims 2x, 3x (ir panašiai) vietos.

CSS tinklelis, kurio vidurinis stulpelis yra 1fr

Atskirų tinklelio elementų dydžio nustatymas

Pakalbėkime apie mūsų tinklelio elementų dydį. Jūs negalite uždėti kieto pločio ant atskirų elementų, nes mes aiškiai nustatome plotį naudodami tinklelio, šablono, stulpelius. O kas, jei norite, kad mūsų pavyzdžio penktas punktas būtų kelių stulpelių plotis? Tai galime padaryti naudodami tinklelio stulpelį ir tarpus.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio-šablono-stulpeliai: pakartokite (3, 10rem);
  tinklelio tarpas: 1rem;
}
.item5 {
  tinklelio stulpelis: 2 span;
}

Aukščiau matysite, kad penkto elemento tinklelio stulpelį nustatome taip, kad jis būtų dviejų intervalų, o tai leis penktajam elementui apimti dviejų stulpelių plotį.

CSS tinklelis su tarpais ant atskiro elemento

O kas, jei norite, kad penktas punktas apimtų tris stulpelius? Taip nutiks.

„CSS Grid“ apima penkis elementus per tris stulpelius

Kadangi penktas elementas natūraliai prasideda antrame stulpelyje, mes neturime pakankamai vietos, kad jis apimtų visą mūsų nustatytą plotį. Taigi ji judės žemyn į kitą eilę. Tą pačią sąvoką galite pritaikyti iš stulpelio tinklelio iki tinklelio eilutės, jei norite, kad elementas apimtų kelias eilutes.

Yra gana paprastas sprendimas, kaip pašalinti tuščią vietą, likusią nuo penktojo elemento, judančio žemyn eilute. Jis gali būti naudojamas nesvarbu, ar nustatote elementą, kad jis apimtų eilutę ar stulpelį - tinklelis-automatinis srautas: tankus.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio-šablono-stulpeliai: pakartokite (3, 10rem);
  tinklelio tarpas: 1rem;
  tinklelis-automatinis srautas: tankus;
}
.item5 {
  tinklelio stulpelis: span 3;
}

CSS tinklelyje tinklelis automatiškai patikrins, ar elementai tinka. Kaip jau sakiau aukščiau, jei daiktas netinka, jis nutrūks kitoje eilutėje. Tinklelio automatinis srautas: tankus nurodo tinkleliui užpildyti tas tuščias vietas bet kokiu tinkamu elementu. Šiuo atveju aš pridėjau septintą tinklelio elementą, taigi tinklelis automatiškai perkelia tą ir šeštąjį elementą į tuščias vietas.

„CSS Grid“ visada išdėstys elementus, kuriems pirmiausia reikia patekti į konkrečią vietą - šiuo atveju penktą elementą, nes jis apima tris stulpelius. Tada, jei turite automatinį tinklelio srautą: tankus rinkinys, jis ieškos kitų elementų, kurie tilptų į tuščias tinklelio vietas.

CSS tinklelis su automatiniu tinklelio srautu: tankus

Tinklelio automatinio srauto ypatybė pati nustato, kuria kryptimi turite pridėti kitą eilutę ar stulpelį po to, kai jau apibrėžėte savo elementus. Eilutė yra numatytoji. Nematau didelio šio atvejo naudojimo, naudodamas automatiškai tinklelį: tankus.

Tinklelio elementų išdėstymas

Mūsų pavyzdyje, kai mes keitėme atskirų tinklelio elementų dydį, mes iš pradžių nustatėme penktą elementą į tinklelio stulpelį: span 2, kuris leido penktam elementui apklijuoti du stulpelius. Tiesą sakant, tinklelio stulpelis yra sutrumpintas tinklelio stulpelio pradžia ir tinklelio stulpelio pabaiga. Tas pats pasakytina ir apie tinklelį.

Taigi, techniškai, penktą punktą nustatėme kaip tinklelio stulpelio pradžią: 2 intervalo tašką ir stulpelio galą: automatinį. Iš esmės mes liepėme tinkleliui pradėti penktą punktą ten, kur natūraliai būtų, bet išeiti dvigubai daugiau.

Dar kartą dirbkime su penktu elementu ir aš tai parodysiu jums naudodamas „Firefox“ kūrėjų leidimo inspektoriaus įrankius, kad jums būtų lengviau pamatyti, koks yra penktas takelio eilutės elementas. Aš taip pat pridėjau dar keletą tinklelio elementų.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio-šablono-stulpeliai: pakartokite (3, 10rem);
  tinklelio tarpas: 1rem;
}
.item5 {
  tinklelio stulpelio pradžia: 1;
  tinklelio stulpelio galas: 3;
}

„CSS Grid“ išdėstys visus elementus prieš mūsų penktąjį, sustos ir žiūrės, kur pradėjome ir baigėme penktą elementą, ir įdės jį ten, kur mums liepė. Trumpai tai būtų tinklelio stulpelis: 1/3, kur 1 yra mūsų pradinė vertė, o 3 yra galutinė vertė.

CSS tinklelis naudojant tinklelio stulpelio pradžią ir stulpelio stulpelio pabaigą

Taip pat galite pasakyti atskiram tinklelio elementui, kiek pločio norite, kad jis apimtų, ir kur norite, kad jis pasibaigtų. Šiame pavyzdyje naudoju sutrumpintus tinklelio stulpelio ypatumus, todėl sakau penktajam elementui, kad jis apimtų du stulpelius, kurie baigiasi ketvirtąja kelio eilute.

.vyniojamasis popierius {
  ekranas: tinklelis;
  tinklelio-šablono-stulpeliai: pakartokite (3, 10rem);
  tinklelio tarpas: 1rem;
}
.item5 {
  tinklelio stulpelis: span 2/4;
}
CSS tinklelis su tinklelio stulpelio sutrumpintomis ypatybėmis

Jei norite, kad jūsų elementas apimtų visą tinklelio plotį, bet nežinote, koks yra jūsų tinklelio plotis, galite nustatyti tinklelio stulpelį: 1 / -1. Iš esmės ta -1 vertė nurodo, kad jūsų daiktas turi praeiti iki paskutinio takelio. Jei tai darysite eilutėmis, pastebėsite, kad jūsų elementas gali būti ne iki galo į tinklelio apačią. Tai bus tik jūsų aiškių, eilučių, o ne numanomų eilučių apačioje.

Šaltiniai

Čia yra keletas šaltinių, kuriuos labai rekomenduoju giliau pasinerti į CSS tinklelį!

  • „Wes Bos“ CSS Tinklelis - tai visiškai nemokama programa, kur sužinojau apie tinklelį. Aš myliu jo mokymo stilių!
  • Išsamus „CSS gudrybių“ vadovas „CSS Tinklelis“ - tai keletas puikių apgaulės lapelių, skirtų užstrigti tam tikrame „Tinklelio“ aspektu.
  • „CSS Grid Garden“ - įdomus būdas praktikuoti tai, ko išmokote apie „CSS Grid“. Aš rekomenduoju pasidaryti vadovėlį prieš bandant tai padaryti, nes kartais tai šiek tiek painioja.

Ačiū, kad perskaitėte mano mokymo programą apie CSS tinklelį! Peržiūrėkite kitus mano straipsnius, tokius kaip „Kaip atsakyti į baimę„ Papasakok man apie save “interviu klausimas„ Kodėl turėtum samdyti „Bootcamp Grad“ arba mano istorija apie tai, kaip tapau kūrėja.

Ir būtinai sekite mane „Twitter“, kur rasite daugybę tviterių apie technologijas ir, jei būsiu sąžiningas, daug tweetų apie šunis.