Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid -ruudukon asettelun opetusohjelma

I. Yleiskatsaus

Grid layout (Grid) on tehokkain CSS-asetteluratkaisu.

Se jakaa verkkosivut ruudukoiksi, ja erilaisia ​​ruudukoita voidaan yhdistää mielivaltaisesti erilaisten asettelujen luomiseksi. Aiemmin tehosteita, joita voitiin saavuttaa vain monimutkaisten CSS-kehysten avulla, on nyt rakennettu selaimiin.

Yllä olevan kuvan kaltainen asettelu on Grid-asettelun erikoisuus.

Ruudukkoasettelulla on tiettyjä yhtäläisyyksiä Flex-asettelun kanssa. Molemmat voivat määrittää useiden kohteiden sijainnin säiliön sisällä. Siinä on kuitenkin tärkeitä eroja.

Flex-asettelu on akseliasettelu, ja se voi määrittää vain "kohteen" sijainnin akselia vasten, jota voidaan pitääYksiulotteinen asettelu . Ruudukkoasettelu jakaa säiliön "riveihin" ja "sarakkeisiin", luo soluja ja määrittää sitten solun, jossa "kohde sijaitsee", jota voidaan pitää2D-asettelu . Ruudukkoasettelu on paljon tehokkaampi kuin Flex-asettelu.

2. Peruskäsitteet

Ennen kuin opit ruudukkoasettelun, sinun on ymmärrettävä joitain peruskäsitteitä.

2.1 Kontit ja projektit

Aluetta, jossa on ruudukkoasettelu, kutsutaan "säiliöksi". Alielementtejä, jotka käyttävät ruudukon sijoittelua säilön sisällä, kutsutaan "kohteiksi".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Yllä olevassa koodissa uloin<div>Elementti on säiliö ja kolme sisäosaa<div>Elementit ovat kohteita.

Ilmoitus: Projekti voi olla vain säilön ylätason alielementti, eikä se sisällä projektin alielementtejä, kuten yllä olevaa koodia.<p> Elementit eivät ole kohteita. Ruudukkoasettelu vaikuttaa vain projekteihin.

2.2 Rivit ja sarakkeet

Säiliön sisällä olevaa vaakasuuntaista aluetta kutsutaan "riviksi" ja pystysuuntaista aluetta "sarakkeeksi".

Yllä olevassa kuvassa vaakasuuntaiset tummat alueet ovat "rivejä" ja pystysuorat tummat alueet "pylväitä".

2.3 solut

Rivien ja sarakkeiden leikkausaluetta kutsutaan "soluksi".

Normaaleissa olosuhteissa,nOK jamsarakkeet tuottavatn x m soluja. Esimerkiksi 3 riviä ja 3 saraketta tuottavat 9 solua.

2.4 Ruudukkoviivat

Viivoja, jotka jakavat ruudukon, kutsutaan "ruudukkoviivoiksi". Vaakasuuntaiset ruudukkoviivat jakavat rivejä ja pystysuorat ruudukkoviivat jakavat sarakkeita.

Normaaleissa olosuhteissa,nOKn + 1juuri vaakasuora ruudukkoviiva,mListattum + 1Pystysuoraa ruudukkoviivaa on kolme, esimerkiksi kolmessa rivissä on neljä vaakasuuntaista ruudukkoviivaa.

Yllä oleva kuva on 4 x 4 ruudukko, jossa on yhteensä 5 vaakaviivaa ja 5 pystysuoraa ruudukkoviivaa.

3. Säiliön ominaisuudet

Grid-asettelun ominaisuudet on jaettu kahteen luokkaan. Yksi tyyppi on määritelty säilössä ja sitä kutsutaan kontin ominaisuuksiksi, toinen tyyppi on määritetty projektille ja sitä kutsutaan projektin ominaisuuksiksi. Tämä osa esittelee ensin säiliön ominaisuudet.

3.1 näyttömäärite

display: gridMäärittää säilön ruudukkoasettelua varten.

div {
  display: grid;
}
1
2
3

Yllä oleva kuva ondisplay: grid/Vaikutus。

Säiliöelementit ovat oletusarvoisesti lohkotason elementtejä, mutta ne voidaan asettaa myös rivielementeiksi.

div {
  display: inline-grid;
}
1
2
3

Yllä oleva koodi määritteleedivOn upotettu elementti, joka käyttää sisäisesti ruudukkoasettelua.

Yllä oleva kuva ondisplay: inline-grid/Vaikutus。

Huomaa, että ruudukkoasettelun asettamisen jälkeen säilön alielementit (kohteet)float、display: inline-block、display: table-cell、vertical-alignjacolumn-*Kaikki muut asetukset ovat virheellisiä.

3.2 grid-template-columns-attribuutti, grid-template-rows-attribuutti

Kun säilö on määrittänyt ruudukon asettelun, sen on jaettava rivit ja sarakkeet.grid-template-columnsOminaisuudet määrittävät kunkin sarakkeen sarakkeen leveyden,grid-template-rowsOminaisuus määrittää kunkin rivin rivin korkeuden.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

yllä oleva koodiMäärittää ruudukon, jossa on kolme riviä ja kolme saraketta. Sarakkeen leveys ja rivin korkeus ovat molemmat100px。

Absoluuttisten yksiköiden sijaan voit käyttää myös prosentteja.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

(1) toista ()

Joskus on erittäin hankala kirjoittaa samaa arvoa toistuvasti, varsinkin kun ruudukoita on useita.Tällä hetkellä voit käyttäärepeat() Toiminto, joka yksinkertaistaa toistuvia arvoja.Yllä oleva koodi käyttäärepeat()Kirjoitettu uudelleen seuraavasti.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Hyväksyy kaksi parametria, ensimmäinen parametri on toistojen määrä (3 yllä olevassa esimerkissä) ja toinen parametri on toistettava arvo.

repeat()On hyvä toistaa kuvio.

grid-template-columns: repeat(2, 100px 20px 80px);
1

yllä oleva koodi6 saraketta on määritelty, ensimmäisen ja neljännen sarakkeen leveys on100px, toinen ja viides sarake20px, kolmas sarake ja kuudes sarake80px。

(2) automaattisen täytön avainsana

Joskus solun koko on kiinteä, mutta säilön koko on määrittelemätön.Jos haluat, että jokaiselle riville (tai sarakkeelle) mahtuu mahdollisimman monta solua, voit käyttääauto-fillAvainsanat edustavat automaattista täydennystä.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

yllä oleva koodiEdustaa kunkin sarakkeen leveyttä100pxja täyttää sitten automaattisesti, kunnes säilössä ei enää ole sarakkeita.

Paitsiauto-fillja avainsanaauto-fit , molempien käyttäytyminen on periaatteessa sama.Vain silloin, kun säiliö on tarpeeksi leveä, jotta kaikki solut mahtuvat yhteen riviin, ja solun leveys ei ole kiinteäkäyttäytymiserot：auto-fillJäljellä oleva leveys täytetään tyhjillä soluilla.auto-fityrittää laajentaa solun leveyttä.

(3) fr avainsana

Jotta suhteelliset suhteet voidaan ilmaista kätevästi, ruudukkoasettelu tarjoaafr Avainsana (lyhenne sanoista murto, eli "fragmentti").Jos kahden sarakkeen leveydet ovat1frja2fr, mikä tarkoittaa, että jälkimmäinen on kaksi kertaa edellinen.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

yllä oleva koodiEdustaa kahta samanleveää saraketta.

frVoidaan käyttää yhdessä absoluuttisen pituuden yksiköiden kanssa, mikä on erittäin kätevää.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

yllä oleva kooditarkoittaa, että ensimmäinen sarake on 150 pikseliä leveä ja toinen sarake on puolet leveämpi kuin kolmas sarake.

(4)minmax()

minmax() Funktio tuottaa pituusalueen, joka osoittaa, että pituus on tällä alueella. Se hyväksyy kaksi parametria, minimiarvon ja maksimiarvon.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Yllä olevassa koodissaminmax(100px, 1fr)Osoittaa, että sarakkeen leveys ei ole pienempi kuin100px, ei suurempi kuin1fr。

(5) automaattinen avainsana

autoAvainsanan esityspituuden määrittää selain itse.

grid-template-columns: 100px auto 100px;
1

Yllä olevassa koodissa toisen sarakkeen leveys on periaatteessa sama kuin sarakkeen solun enimmäisleveys, ellei solun sisältöä ole asetettumin-width, ja tämä arvo on suurempi kuin suurin leveys.

(6) Ruudukon viivojen nimi

grid-template-columnsattribuutit jagrid-template-rowsOminaisuuksissa voit myös määrittää kunkin ruudukon rivin nimen hakasulkeilla, jotta niitä on helppo käyttää tulevaisuudessa.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Yllä oleva koodi määrittää ruudukon asettelun, jossa on 3 riviä x 3 saraketta, joten siinä on 4 pystysuoraa ruudukkoviivaa ja 4 vaakasuuntaista ruudukkoviivaa. Hakasulkeissa on kahdeksan rivin nimet.

Ruudukkoasettelu sallii useita nimiä samalle riville, kuten[fifth-line row-5]。

(7) Asetteluesimerkki

grid-template-columns Ominaisuudet ovat erittäin hyödyllisiä verkkosivujen asettelussa. Kaksisarakkeinen asettelu vaatii vain yhden koodirivin.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Yllä oleva koodi asettaa vasemman sarakkeen arvoksi 70 % ja oikean sarakkeen arvoksi 30 %.

Perinteinen kahdentoista ruudukon asettelu on myös helppo kirjoittaa.

grid-template-columns: repeat(12, 1fr);
1

3.3 grid-row-gap -attribuutti, grid-column-gap -attribuutti, grid-gap -attribuutti

grid-row-gapOminaisuus määrittää rivivälin (riviväli),grid-column-gapOminaisuus määrittää sarakkeiden välisen välin (sarakeväli).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

yllä oleva koodikeskellä,grid-row-gapKäytetään rivivälin asettamiseen,grid-column-gapKäytetään sarakevälin asettamiseen.

grid-gapOminaisuudet ovatgrid-column-gapjagrid-row-gapYhdistetty lyhenne muoto, syntaksi on seuraava.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Siksi yllä oleva CSS-koodin osa vastaa seuraavaa koodia.

.container {
  grid-gap: 20px 20px;
}
1
2
3

josgrid-gapToinen arvo jätetään pois ja selain katsoo toisen arvon olevan yhtä suuri kuin ensimmäinen arvo.

Uusimpien standardien mukaan edellä mainitut kolme attribuuttinimeägrid-Etuliite on poistettu,grid-column-gapjagrid-row-gapkirjoitettu nimelläcolumn-gapjarow-gap，grid-gapkirjoitettu nimellägap。

3.4 grid-template-alue-omaisuus

Ruudukkoasettelun avulla voit määrittää "alueita", jotka koostuvat yhdestä tai useista soluista.grid-template-areasOminaisuuksia käytetään alueiden määrittämiseen.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Yllä oleva koodi jakaa ensin 9 solua ja sitten nimeää neasaapuaiYhdeksän aluetta vastaavat vastaavasti näitä yhdeksää solua.

Kirjoitusmenetelmä useiden solujen yhdistämiseksi yhdeksi alueeksi on seuraava.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Yllä oleva koodi jakaa 9 soluaa、b、ckolme aluetta.

Alla on esimerkki asettelusta.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Yllä olevassa koodissa yläreuna on otsikkoalueheader, alaosa on alatunnistealuefooter, keskiosa onmainjasidebar。

Jos joitain alueita ei tarvitse hyödyntää, käytä "pisteitä" (.)ilmaista.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Yllä olevassa koodissa keskimmäinen sarake on piste, mikä tarkoittaa, että solua ei käytetä tai solu ei kuulu mihinkään alueeseen.

Huomaa, että alueiden nimeäminen vaikuttaa ruudukon linjoihin.Kunkin alueen lähtöruudukkoviiva nimetään automaattisesti区域名-start, päättynyt ruudukkoviiva nimetään automaattisesti区域名-end。

Esimerkiksi alue on nimettyheader, silloin kutsutaan vaaka- ja pystysuorat ruudukon viivat aloituskohdassaheader-start, kutsutaan vaaka- ja pystysuorat ruudukkoviivat loppupisteessäheader-end。

3.5 grid-auto-flow -attribuutti

Kun ruudukko on jaettu, säilön alielementit sijoitetaan automaattisesti kuhunkin ruudukkoon järjestyksessä. Oletussijoitusjärjestys on "rivi ensin, sarake toinen", eli täytä ensimmäinen rivi ensin ja aloita sitten toisen rivin sijoittaminen, mikä on alla olevan kuvan numeroiden järjestys.

Tämän tilauksen on antanutgrid-auto-flowAttribuutilla määritetty oletusarvo onrow , eli "rivi ensin, sitten rivi".Voit myös asettaa sencolumn, muuttuu "rivi ensin, sitten rivi".

grid-auto-flow: column;
1

yllä oleva koodijo asetettucolumnTästä eteenpäin sijoitusjärjestys muuttuu alla olevan kuvan mukaiseksi.

grid-auto-flowAttribuutin asettamisen lisäksirowjacolumn, voidaan myös asettaarow densejacolumn dense . Näitä kahta arvoa käytetään pääasiassa sijoittamaan automaattisesti jäljellä olevat kohteet sen jälkeen, kun tietyt kohteet on määritetty.

Esimerkki allaOlkoon projekti nro 1 ja projekti nro 2 kumpikin kaksi solua ja sitten oletusarvoisestigrid-auto-flow: rowTässä tapauksessa luodaan seuraava asettelu.

Yllä olevassa kuvassa kohdan nro 1 takana oleva paikka on tyhjä Tämä johtuu siitä, että kohta 3 seuraa oletusarvoisesti kohtaa 2, joten se sijoittuu kohdan 2 taakse.

Muokkaa nyt asetuksia ja aseta nerow dense, tarkoittaa "rivi ensin, sarake toinen", ja täytä se mahdollisimman tiukasti ilman välilyöntejä.

grid-auto-flow: row dense;
1

yllä oleva koodiVaikutus on seuraava.

Yllä oleva kuva täyttää ensin ensimmäisen rivin ja sitten toisen rivin, joten kohta 3 seuraa kohtaa 1. Kohteet nro 8 ja nro 9 sijoitetaan neljännelle riville.

Jos muutat asetukseksicolumn dense, tarkoittaa "sarake ensin, sitten rivi", ja täytä välilyönnit niin paljon kuin mahdollista.

grid-auto-flow: column dense;
1

yllä oleva koodiVaikutus on seuraava.

Yllä oleva kuva täyttää ensin ensimmäisen sarakkeen ja sitten toisen sarakkeen, joten kohta 3 on ensimmäisessä sarakkeessa ja kohta 4 toisessa sarakkeessa. Kohteet 8 ja 9 puristettiin neljänteen sarakkeeseen.

3.6 tasa-kohteet-attribuutti, align-items-attribuutti, paikka-kohteet-attribuutti

justify-itemsOminaisuus määrittää solun sisällön vaakasuuntaisen sijainnin (vasen, keskellä, oikea),align-itemsOminaisuus määrittää solun sisällön pystysuoran sijainnin (ylä, keski, alaosa).

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Nämä kaksi attribuuttia on kirjoitettu täsmälleen samalla tavalla ja niillä voi olla seuraavat arvot.

• aloitus: kohdista solun aloitusreuna.
• loppu: Tasaa solun päätyreunaan.
• keskus: Keskus solun sisällä.
• venyttää: venytä täyttääksesi solun koko leveyden (oletusarvo).

.container {
  justify-items: start;
}
1
2
3

yllä oleva koodiOsoittaa, että solun sisältö on tasattu vasemmalle ja vaikutus on alla olevan kuvan mukainen.

.container {
  align-items: start;
}
1
2
3

yllä oleva koodiOsoittaa, että solun sisältö on kohdistettu pään mukaan ja vaikutus on alla olevan kuvan mukainen.

place-itemsOminaisuudet ovatalign-itemsattribuutit jajustify-itemsKiinteistön yhdistetty pikakirjoitusmuoto.

place-items: <align-items> <justify-items>;
1

Alla on esimerkki.

place-items: start end;
1

Jos toinen arvo jätetään pois, selain pitää sitä yhtä suurena kuin ensimmäinen arvo.

3.7 justify-content-attribuutti, align-content-attribuutti, place-content-attribuutti

justify-contentAttribuutti on koko sisältöalueen vaakasuora sijainti säilön sisällä (vasen, keskellä, oikea),align-contentAttribuutti on koko sisältöalueen pystysuuntainen sijainti (ylä, keski, alaosa).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Nämä kaksi attribuuttia on kirjoitettu täsmälleen samalla tavalla ja niillä voi olla seuraavat arvot. (Alla olevat kuvat perustuvat kaikkiinjustify-contentEsimerkiksi ominaisuudetalign-content Attribuuttikaavio on täsmälleen sama, paitsi että vaakasuuntaus muutetaan pystysuuntaiseksi. )

• aloitus - kohdistetun säilön aloitusreuna.
  
• end - kohdistaa säilön päädyn reunan.
  
• keskellä - Keskitä säiliö sisälle.
  
• venytä - Kun tuotteen kokoa ei ole määritetty, venytä koko ruudukon säiliötä varten.
  
• space-round - yhtä suuri tila kunkin kohteen molemmilla puolilla. Siksi kohteiden välinen tila on kaksi kertaa suurempi kuin kohteiden ja kontin reunan välinen tila.
  
• space-between - Kohteiden välissä on yhtä suuri tila, eikä kohteiden ja säilön reunuksen välillä ole tilaa.
  
• tilaa tasaisesti – kohteiden välinen tila on yhtä suuri, ja kohteiden ja säilön reunuksen välinen tila on yhtä pitkä.
  
  place-contentOminaisuudet ovatalign-contentattribuutit jajustify-contentKiinteistön yhdistetty pikakirjoitusmuoto.

place-content: <align-content> <justify-content>;
1

Alla on esimerkki.

place-content: space-around space-evenly;
1

Jos jätät toisen arvon pois, selain olettaa, että toinen arvo on yhtä suuri kuin ensimmäinen arvo.

3.8 grid-auto-columns -ominaisuus, grid-auto-rows -ominaisuus

Joskus joillekin kohteille määrätään paikkoja olemassa olevan ruudukon ulkopuolella. Esimerkiksi ruudukossa on vain 3 saraketta, mutta tietty kohde on määritetty 5. rivillä. Tällä hetkellä selain luo automaattisesti ylimääräisiä ruudukoita helpottaakseen kohteiden sijoittamista.

grid-auto-columnsattribuutit jagrid-auto-rows Ominaisuuksilla asetetaan selaimen automaattisesti luoman redundantin ruudukon sarakkeen leveys ja rivikorkeus.Ne on kirjoitettu samalla tavalla kuingrid-template-columnsjagrid-template-rows Täysin sama. Jos näitä kahta ominaisuutta ei ole määritetty, selain määrittää uuden ruudukon sarakkeen leveyden ja rivin korkeuden kokonaan solun sisällön koon perusteella.

Esimerkki allaSisällä jaettu ruudukko on 3 riviä x 3 saraketta, mutta kohta nro 8 on määritelty 4. rivillä ja kohta nro 9 on määritetty 5. rivillä.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Yllä oleva koodi määrittää, että uusi rivikorkeus on tasaisesti 50 pikseliä (alkuperäinen rivin korkeus on 100 pikseliä).

3.9 grid-template -attribuutti, grid-attribuutti

grid-templateOminaisuudet ovatgrid-template-columns、grid-template-rowsjagrid-template-areasNäiden kolmen ominaisuuden yhdistetty lyhytmuotoinen muoto.

gridOminaisuudet ovatgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowNäiden kuuden ominaisuuden yhdistetty lyhenne.

Lukemisen ja kirjoittamisen helppouden kannalta on suositeltavaa olla yhdistämättä attribuutteja, joten näitä kahta attribuuttia ei esitetä tässä yksityiskohtaisesti.

4. Projektin attribuutit

Projektissa on määritelty seuraavat ominaisuudet.

4.1 grid-column-star -ominaisuus, grid-column-end -ominaisuus, grid-row- start -ominaisuus, grid-row-end -ominaisuus

Projektin sijainti voidaan määrittää. Tarkoituksena on määrittää projektin neljä reunaa ja vastaavasti mitkä ruudukkoviivat sijoitetaan.

• grid-column-startOminaisuudet: Pystysuorat ruudukkoviivat, joissa vasen reuna sijaitsee
• grid-column-endOminaisuus: pystysuora ruudukkoviiva, jossa oikea reuna sijaitsee
• grid-row-startOminaisuudet: Vaakasuora ruudukkoviiva, jossa yläreuna sijaitsee
• grid-row-endOminaisuudet: Vaakasuora ruudukkoviiva, jossa alareuna sijaitsee

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

yllä oleva koodiMäärittää, että kohteen 1 vasen reuna on toinen pystysuora ruudukkoviiva ja oikea reuna on neljäs pystysuora ruudukkoviiva.

Yllä olevassa kuvassa vain nimikkeen nro 1 vasen ja oikea reuna on määritetty, ylä- ja alareunaa ei ole määritetty, joten käytetään oletussijaintia, eli yläreuna on ensimmäinen vaakasuora ruudukkoviiva, ja alareuna on toinen vaakasuora ruudukkoviiva.

Kohdetta 1 lukuun ottamatta muilla kohteilla ei ole määritettyjä paikkoja, ja selain määrittää ne automaattisesti. Tällä hetkellä niiden sijainnit määrittävät säilöngrid-auto-flowAttribuutin määräämä oletusarvo onrow , joten ne järjestetään "rivi ensin, sitten sarake".Lukijat voivat muuttaa tämän attribuutin arvoksicolumn、row densejacolumn dense, nähdäksesi kuinka muiden kohteiden paikat ovat muuttuneet.

Esimerkki allaSe johtuu neljän reunan sijainnin määrittämisestä.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Näiden neljän attribuutin arvot voidaan määrittää ruudukon rivin numeron lisäksi myös ruudukon nimeksi.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Yllä olevassa koodissa vasemman ja oikean reunuksen paikat on määritetty ruudukon rivien nimiksi.

Näiden neljän attribuutin arvoja voidaan myös käyttääspanAvainsana, joka ilmaisee "span", eli kuinka monta ruudukkoa on jaettu vasemman ja oikean reunan (ylä- ja alareunuksen) välillä.

.item-1 {
  grid-column-start: span 2;
}
1
2
3

yllä oleva koodiOsoittaa, että nimikkeen nro 1 vasen reuna kattaa 2 ruudukkoa oikeasta reunasta.

Tämä liittyykoodi allaVaikutus on täsmälleen sama.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Jos kohteet ovat päällekkäisiä, käytä näitä neljää attribuuttiaz-indexOminaisuus määrittää nimikkeiden päällekkäisen järjestyksen.

4.2 grid-column attribuutti, grid-row attribuutti

grid-columnOminaisuudet ovatgrid-column-startjagrid-column-endYhdistetty lyhenne muotogrid-rowOminaisuudet ovatgrid-row-startattribuutit jagrid-row-endLyhennetty fuusiomuoto.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Alla on esimerkki.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Yllä olevassa koodissa projektiitem-1Varaa ensimmäinen rivi ensimmäisestä sarakerivistä kolmanteen sarakeriville.

Näiden kahden attribuutin joukossa voit myös käyttääspanAvainsana, joka ilmaisee, kuinka monta ruudukkoa ulottuu.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

yllä oleva koodisisään, projektiitem-1Varattu alue sisältää ensimmäisen rivin + toisen rivin ja ensimmäisen sarakkeen + toisen sarakkeen.

Vinoviiva ja seuraavat osat voidaan jättää pois ja ne ulottuvat ruudukon oletusarvoisesti.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Yllä olevassa koodissa projektiitem-1Varaa ensimmäinen ruudukko vasemmassa yläkulmassa.

4.3 grid-area -määrite

grid-areaAttribuutti määrittää alueen, jolle tuote sijoitetaan.

.item-1 {
  grid-area: e;
}
1
2
3

yllä oleva koodiVuonna projekti nro 1 sijaitseeealueella, vaikutus on alla olevan kuvan mukainen.

grid-areaOminaisuuksia voidaan käyttää myös mmgrid-row-start、grid-column-start、grid-row-end、grid-column-endYhdistetty lyhennelomake määrittää suoraan projektin sijainnin.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Alla on aesimerkki。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 Justify-self-attribuutti, align-self-attribuutti, place-self-attribuutti

justify-selfOminaisuus määrittää solun sisällön vaakasuuntaisen sijainnin (vasen, keskellä, oikea) ja sen jälkeenjustify-itemsOminaisuuksia käytetään täsmälleen samoin, mutta ne koskevat vain yhtä tuotetta.

align-selfOminaisuus määrittää solun sisällön pystysuoran sijainnin (ylä, keski, alaosa) ja sen jälkeenalign-itemsAttribuuttien käyttö on täsmälleen sama, ja se vaikuttaa vain yhteen projektiin.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Molemmat ominaisuudet voivat saada seuraavat neljä arvoa.

• aloitus: kohdista solun aloitusreuna.
• loppu: Tasaa solun päätyreunaan.
• keskus: Keskus solun sisällä.
• venyttää: venytä täyttääksesi solun koko leveyden (oletusarvo).

Alla onjustify-self: startesimerkki.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfOminaisuudet ovatalign-selfattribuutit jajustify-selfKiinteistön yhdistetty pikakirjoitusmuoto.

place-self: <align-self> <justify-self>;
1

Alla on esimerkki.

place-self: center center;
1

Jos toinen arvo jätetään pois,place-selfOmaisuus pitää näitä kahta arvoa yhtä suurena.