Ruudukkonimettyjen alueiden käyttäminen asettelun visualisoimiseen (ja viittaamiseen).

Aina kun rakennamme yksinkertaisia ​​tai monimutkaisia ​​asetteluja CSS-ruudukon avulla, sijoitamme kohteet yleensä rivinumeroilla. Ruudukkoasettelut sisältävät ruudukkoviivoja, jotka indeksoidaan automaattisesti positiivisilla ja negatiivisilla rivinumeroilla (eli ellemme nimeä ne selkeästi). Kohteiden sijoittaminen rivinumeroilla on hieno tapa asetella asioita, vaikka CSS Gridillä on useita tapoja saavuttaa sama alamittaisella kognitiivisella rasituksella. Yksi näistä tavoista on jotain, jota pidän "ASCII"-menetelmänä.

ASCII-menetelmä pähkinänkuoressa

Menetelmä tiivistyy käyttöön grid-template-areas sijoittaa ruudukon kohteet mukautettujen alueiden avulla ruudukon säilötasolle rivinumeroiden sijaan.

Kun julistamme elementin ruudukkosäiliöksi käyttämällä display: grid, ruudukkosäilö luo oletusarvoisesti yksisarakkeen raidan ja rivit, jotka sisältävät riittävästi ruudukon kohteita. Säilön alielementit, jotka osallistuvat ruudukkoasetteluun, muunnetaan ruudukkokohdiksi niiden koosta riippumatta display omaisuutta.

Luodaan esimerkiksi ruudukko määrittelemällä sarakkeet ja rivit eksplisiittisesti käyttämällä grid-template-columns ja grid-template-rows ominaisuudet.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
}

Tämä pieni CSS-katkelma luo 3 × 2 -ruudukon, jossa ruudukon kohteet vievät saman tilan sarakkeissa ja jossa ruudukko sisältää kolme riviä, joiden raidan koko on 200px.

Voimme määritellä koko asettelun nimetyt ruudukkoalueet käyttäen grid-template-areas omaisuutta. Mukaan spec, alkuarvo grid-template-areas is none.

grid-template-areas = none | <string>+

<string>+ on luettelo merkkijonoista, jotka on liitetty lainaukseen. Jokainen merkkijono esitetään soluna, ja jokainen lainausmerkkijono esitetään rivinä. Kuten tämä:

grid-template-areas: "head head" "nav main" "foot foot";

Arvo grid-template-areas kuvailee asettelua neljäksi ruudukkoalueeksi. He ovat,

• head
• nav
• main
• foot

head ja foot kattaa kaksi sarakeraitaa ja yksi riviraita. Jäljellä oleva nav ja main kukin kattaa yhden sarakeraidan ja yhden riviraidan. Arvo grid-template-areas on paljon kuin ASCII-merkkien järjestämistä Chris ehdotti jokin aika sitten voimme saada visualisoinnin asettelun yleisestä rakenteesta itse CSS:stä, mikä on vaivattomin tapa ymmärtää se.

OK, joten loimme asettelun neljällä nimetyllä ruudukkoalueella: head, nav, main, foot.

Aloitetaan nyt ruudukon kohteiden sijoittaminen nimettyihin ruudukkoalueisiin rivinumeroiden sijaan. Tarkemmin sanottuna sijoitetaan a header elementti nimetylle ruudukkoalueelle head ja määritä nimetty ruudukkoalue head vuonna header elementtiä käyttämällä grid-area omaisuutta.

Nimettyjä ruudukkoalueita ruudukkoasettelussa kutsutaan identiteetit. Joten teimme juuri mukautetun tunnuksen nimeltä head joita voimme käyttää kohteiden sijoittamiseen tiettyihin ruudukkoraitoihin.

header { grid-area: head; }

Voimme käyttää muita HTML-elementtejä käyttämällä muita mukautettuja tunnisteita:

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

Nimettyjen aluearvojen kirjoittaminen

Mukaan CSS-ruudukon asettelumoduulin taso 1, kaikki merkkijonot on määritettävä seuraavilla tunnuksilla:

• Nimetty solutunnus: Tämä edustaa nimettyä ruudukkoaluetta ruudukossa. Esimerkiksi, head on nimetty solutunnus.
• Nollasolutunniste: Tämä edustaa nimeämätöntä ruudukkoaluetta ruudukkosäiliössä. Esimerkiksi ruudukon tyhjä solu on nollasolutunniste.
• Roskakoritunnus: Tämä on syntaksivirhe, kuten virheellinen ilmoitus. Esimerkiksi solujen ja rivien erilainen määrä ruudukon kohteiden määrään verrattuna tekisi ilmoituksesta virheellisen.

In grid-template-area, jokaisessa lainatussa merkkijonossa (riveissä) on oltava sama määrä soluja ja määritettävä koko ruudukko jättämättä huomiotta yhtään solua.

Voimme jättää solun huomiotta tai jättää sen soluksi tyhjä solu käyttämällä pistemerkkiä (.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

Jos se tuntuu visuaalisesti hankalalta tai epätasapainoiselta, voimme käyttää useita pisteen merkkejä ilman, että niitä erottaa välilyöntejä:

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

Nimetty solutunniste voi kattaa useita ruudukon soluja, mutta näiden solujen on muodostettava suorakaiteen muotoinen asettelu. Toisin sanoen emme voi luoda "L"- tai "T"-muotoisia asetteluja, vaikka tekniset tiedot tekevät vihje tuesta muihin kuin suorakaiteen muotoisiin asetteluihin, joissa alueet eivät ole yhteydessä toisiinsa.

ASCII on parempi kuin rivipohjainen sijoittelu

Käytämme viivapohjaista sijoittelua grid-column ja grid-row ominaisuudet elementin sijoittamiseksi ruudukkoon käyttämällä ruudukon rivinumeroita, jotka indeksoidaan automaattisesti numerolla:

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

Mutta ruudukon alkioiden rivinumerot voivat muuttua, jos asettelumme muuttuu keskeytyskohdassa. Näissä tapauksissa emme voi luottaa samoihin rivinumeroihin, joita käytimme tietyssä katkaisupisteessä. Tässä koodin ymmärtäminen vaatii ylimääräistä kognitiivista rasitusta.

Siksi mielestäni ASCII-pohjainen lähestymistapa toimii parhaiten. Voimme määrittää uudelleen kunkin keskeytyskohdan asettelun käyttämällä grid-template-areas ruudukkosäiliössä, joka tarjoaa kätevän kuvan siitä, miltä asettelu näyttää suoraan CSS:ssä – se on kuin itse dokumentoitu koodi!

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

Voimme itse asiassa nähdä ruudukon rivinumerot ja ruudukkoalueet DevToolsissa. Siirry esimerkiksi Firefoxissa Asettelu-paneeliin. Sitten alla ruudukko välilehti, etsi "Ruudukon näyttöasetukset" ja ota käyttöön "Näytä rivinumero" ja "Näyttöalueiden nimet" vaihtoehtoja.

Tämä nimettyjä alueita käyttävä ASCII-lähestymistapa vaatii paljon vähemmän vaivaa visualisoida ja löytää helposti elementtien sijoittelua.

Katsotaanpa "yleistä" käyttötapausta

Aina kun näen opetusohjelman nimetyistä ruudukkoalueista, yleinen esimerkki on yleensä jokin asettelukuvio, joka sisältää header, main, sidebarja footer alueilla. Pidän tätä "universaalina" käyttötapauksena, koska se heittää niin leveän verkon.

Se on loistava esimerkki havainnollistamaan kuinka grid-template-areas toimii, mutta tosielämän toteutus sisältää yleensä mediakyselyitä, jotka on asetettu muuttamaan asettelua tietyillä näkymän leveyksillä. Sen sijaan, että joutuisi ilmoittamaan uudelleen grid-area jokaisessa ruudukkokohdassa kussakin keskeytyskohdassa sijoittaaksemme kaiken uudelleen, voimme käyttää grid-template-areas "vastaamaan" keskeytyskohtaan sen sijaan - ja saat mukavan kuvan asettelusta prosessin jokaisessa keskeytyskohdassa!

Ennen kuin määrität asettelun, määritetään jokaiselle elementille tunnus käyttämällä grid-area omaisuutta perustyylinä.

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

Määritetään nyt asettelu uudelleen perustyyliksi. Käytämme mobiililähtöistä lähestymistapaa, jotta asiat pinoutuvat oletuksena:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

Jokainen ruudukon kohde on automaattinen kokoinen tässä kokoonpanossa - mikä näyttää hieman oudolta - joten voimme asettaa min-height: 100vh ruudukkosäiliössä, jotta meillä on enemmän tilaa työskennellä:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

Sanotaan nyt, että haluamme main elementti asettuu pinotun oikealle puolelle left ja right sivupalkit, kun saavutamme hieman leveämmän näkymän leveyden. Ilmoitamme uudelleen grid-template-areas päivitetyllä ASCII-asettelulla saadaksesi tämän:

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

Heitin sinne sarakkeiden ja rivien kokoa puhtaasti esteettisyyden vuoksi.

Kun selain laajenee entisestään, saatamme haluta muuttaa asettelua uudelleen, jotta main on välissä left ja right sivupalkit. Kirjoitetaan ulkoasu visuaalisesti!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Implisiittisten rivinimien hyödyntäminen joustavuuden lisäämiseksi

Speksien mukaan, grid-template-areas luo automaattisesti nimet nimettyjen ruudukkoalueiden luomille ruudukkoviivoille. Kutsumme näitä epäsuorasti nimettyjä ruudukkoviivoja, koska ne on nimetty meille ilmaiseksi ilman lisätyötä.

Jokainen nimetty ruudukkoalue saa neljä epäsuorasti nimettyä ruudukkoviivaa, kaksi sarakkeen suuntaan ja kaksi rivin suuntaan, missä -start ja -end liitetään tunnisteeseen. Esimerkiksi ruudukkoalue nimeltä head saa head-start ja head-end viivoja molempiin suuntiin yhteensä neljä implisiittisesti nimettyä ruudukkoviivaa.

Voimme käyttää näitä linjoja hyödyksemme! Jos esimerkiksi haluamme elementin peittävän main, leftja right verkkomme alueet. Aiemmin puhuimme siitä, kuinka asettelujen on oltava suorakaiteen muotoisia – T- ja L-muotoisia asetteluja ei sallita. Tästä syystä emme voi käyttää ASCII-visuaalista asettelumenetelmää peittokuvan sijoittamiseen. Voimme kuitenkin käyttää implisiittisiä rivinimiämme käyttämällä samaa grid-area peittokuvan ominaisuus, jota käytämme muiden elementtien sijoittamiseen.

Tiesitkö että grid-area on pikakirjoitusominaisuus, tavallaan samalla tavalla kuin margin ja padding ovat pikakirjoituksen ominaisuuksia? Se ottaa useita arvoja samalla tavalla, mutta sen sijaan, että seuraisi "myötäpäivään" kuten margin -joka menee järjestyksessä margin-block-start, margin-inline-end, margin-block-endja margin-inline-start - grid-area menee näin:

grid-area: block-start / inline-start / block-end / inline-end;

Mutta me puhumme riveistä ja sarakkeista, emme lohko- ja riviohjeista, eikö niin? No, ne vastaavat toisiaan. Rivin akseli vastaa lohkon suuntaa ja sarakkeen akseli vastaa rivin suuntaa:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

Takaisin peittoelementin sijoittamiseen ruudukkokohdaksi asettelussamme. The grid-area ominaisuus auttaa paikantamaan elementti implisiittisesti nimettyjen ruudukkoviivojen avulla:

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

Minimaaliverkkojärjestelmän luominen

Kun keskitymme asetteluihin, kuten juuri näkemäänmme "universaaliseen" käyttötapaukseen, on houkuttelevaa ajatella ruudukkoalueita yhden alueen elementtiä kohden. Mutta sen ei tarvitse toimia niin. Voimme toistaa identiteetit varataksemme niille enemmän tilaa asettelussa. Näimme sen, kun toistimme head ja foot identiteetit viimeisessä esimerkissä:

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Huomaa, että main, leftja right toistetaan myös, mutta lohkosuunnassa.

Unohdamme koko sivun asettelut ja käytämme komponentissa nimettyjä ruudukkoalueita. Ruudukko on yhtä hyvä komponenttiasetteluille kuin kokonaisille sivuille!

Tässä on melko tavallinen sankarikomponentti, joka sisältää rivin kuvia, joita seuraa erilaisia ​​​​tekstilohkoja:

HTML on melko yksinkertainen:

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

Voisimme tehdä tämän todella nopean pinotun asettelun saamiseksi:

.hero {
  grid-template-areas:
    "image"
    "text";
}

Mutta sitten meidän on tavoitettava joitain padding, max-width tai mitä tahansa saadaksesi tekstialueen kuvariviä kapeammaksi. Entä jos laajentaisimme ASCII-asettelumme nelisarakkeiseksi ruudukoksi toistamalla tunnuksemme molemmilla riveillä:

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

Selvä, nyt voimme sijoittaa ruudukkokohteet näille nimetyille alueille:

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

Toistaiseksi kaikki hyvin - molemmat rivit vievät koko leveyden. Voimme käyttää sitä perusasetteluna pienille näytöille.

Mutta ehkä haluamme ottaa käyttöön kapeamman tekstin, kun näkymä saavuttaa suuremman leveyden. Voimme käyttää sitä, mitä tiedämme pisteestä, sarakkeiden ohittamiseen. Otetaan text ident ohita ensimmäinen ja viimeinen sarake tässä tapauksessa.

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

Nyt meillä on haluamasi väli:

Jos asettelu vaatii lisäsäätöä vielä suuremmissa keskeytyspisteissä, voimme lisätä sarakkeita ja jatkaa sieltä:

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

Kehittäjätyökalun visualisointi:

Muistatko, kun 12 sarakkeen ja 16 sarakkeen asettelut olivat suuria asioita CSS-kehyksissä? Voimme skaalata nopeasti siihen ja ylläpitää mukavaa visuaalista ASCII-asettelua koodissa:

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

Katsotaanpa jotain monimutkaisempaa

Olemme tarkastelleet yhtä melko yleistä esimerkkiä ja yhtä suhteellisen suoraviivaista esimerkkiä. Voimme silti saada hienoja ASCII-asetteluvisualisointeja monimutkaisemmilla asetteluilla.

Jatketaan tätä:

Olen jakanut tämän kahteen osaan HTML-koodissa, a header ja main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

Mielestäni flexbox sopii paremmin header koska voimme erottaa sen lapsielementit helposti tällä tavalla. Joten ei grid siellä:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

Mutta grid sopii hyvin main elementin asettelua. Määritetään asettelu ja määritetään tunnukset vastaaville elementeille, joita tarvitsemme sijoittaaksemme .text ja kolme .image elementtejä. Aloitamme tästä pienten näyttöjen perustana:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

Näet jo, mihin olemme menossa tällä, eikö? Asettelu visualisoidaan meille, ja voimme pudottaa ruudukon kohteet paikoilleen mukautetuilla tunnisteilla:

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

Tämä on perusasettelumme, joten lähdetään laajempaan keskeytyskohtaan:

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

Lyön vetoa, että tiedät tarkalleen, miltä se näyttää, koska asettelu on siellä koodissa!

Sama sopimus, jos päätämme skaalata entisestään:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

Tässä koko demo:

Käytän "negatiivista margin hack" saadaksesi ensimmäisen kuvan päällekkäin otsikon kanssa.

Käärimistä

Olen utelias, jos joku muu käyttää grid-template-areas luodaksesi nimettyjä alueita, jotta ruudukkoasettelusta on ASCII-visuaalisuus. Sen käyttäminen viitteenä CSS-koodissani on auttanut poistamaan mystifikaatioita joistakin muuten monimutkaisista suunnitelmista, jotka ovat saattaneet olla vieläkin monimutkaisempia rivinumeroiden käsittelyssä.

Mutta jos ei muuta, ruudukkoasettelujen määrittäminen tällä tavalla opettaa meille mielenkiintoisia asioita CSS Gridistä, jotka näimme koko tämän viestin:

• - grid-template-areas ominaisuuden avulla voimme luoda mukautettuja tunnisteita - tai "nimettyjä alueita" - ja käyttää niitä ruudukon kohteiden sijoittamiseen käyttämällä grid-area omaisuutta.
• On olemassa kolmenlaisia ​​"tunnuksia". grid-template-areas hyväksyy arvoiksi, mukaan lukien nimetyt solutunnisteet, nollasolutunnisteet ja roskakorisolutunnisteet.
• Jokainen rivi, joka on määritelty grid-template-areas tarvitsee saman määrän soluja. Yhden solun huomioimatta jättäminen ei luo asettelua; sitä pidetään roskapostina.
• Voimme saada visuaalisen ASCII-tyyppisen kaavion ruudukon asettelusta grid-template-areas ominaisuuden arvo käyttämällä vaadittuja välilyöntejä nimettyjen solujen välissä määriteltäessä ruudukkoasettelua.
• Varmista, ettei tyhjäsolun sisällä ole välilyöntejä (esim .....). Muussa tapauksessa yksi tyhjä välilyönti nollasolujen välissä luo tarpeettomia tyhjiä soluja, mikä johtaa virheelliseen asetteluun.
• Voimme määrittää asettelun uudelleen eri keskeytyspisteissä asettamalla ruudukon kohteet uudelleen käyttämällä grid-area, ja ilmoittaa sitten asettelun uudelleen käyttämällä grid-template-areas ruudukon säilöön päivittääksesi kappaleluettelon tarvittaessa. Ruudukon kohteita ei tarvitse koskea.
• Mukautetut nimetyt ruudukkoalueet saavat automaattisesti neljä implisiittisesti määritettyä rivin nimeä — <custom-ident>-start ja <custom-ident>-end sekä sarake- että rivisuunnassa.