Hisia la CSS grid-area

Inaa uangalifu wa mafunzo:

Inaa uangalifu na matumizi

Inaa uangalifu ya kipropeti cha grid-area inaweza kutumiwa kwa kugawanya jina la vipengele vya kifungu. Baadaye, inaweza kutumiwa kwa kifungu cha kina cha jinga kwa kutambua ukubwa na upeo wa vipengele vya kifungu katika muundo wa kifungu, ni kivinjari cha kipropeti cha hizi kipropeti: grid-template-areas Inaa uangalifu ya kipropeti cha kifungu cha jinga. Tazama mifano inayotolewa chini.

Tunajua pia:

Inaa uangalifu ya mafunzo ya CSS:Inaa uangalifu ya kifungu cha CSS

Mifano

Mifano 1

Inaenda kuanza "item1" kwenye ukurasa 2 na kuingia kwa siku kumi na tatu:

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

Tenda tena

Mbinu:Kuna mifano inayotolewa kwenye mabara ya kiziko.

Inaa uangalifu ya CSS

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

Kivinjari ya kipropeti

Kivinjari Kueleza
grid-row-start Inaa uangalifu kwa kuanza kutambua vipengele vya jina.
grid-column-start Inaa uangalifu kwa kuanza kutambua vipengele vya jina.
grid-row-end Inasababisha kiwango cha kirefu cha kirefu kufikia kirefu cha kwanza ama kumwengenea kirefu cha nne:
grid-column-end Inasababisha kiwango cha kirefu cha kikomo kufikia kikomo cha kwanza ama kumwengenea kikomo cha nne:
itemname Inasababisha kiwango cha kijana cha kirefu kwa kufikia kiwango cha kirefu cha kwanza:

Maelezo ya mbinu

Wakati wa kwanza: auto / auto / auto / auto
Kutumia: Haiwezi
Muarama wa kina: Inasimamia. Tazama:Muarama wa kina:。
Safu: CSS Grid Layout Module Level 1
Inayofaa kwa Kijeshi: object.style.gridArea="1 / 2 / span 2 / span 3"

Mafano ya kuingia

Mfano 2

Item1 inajulikana kama 'myArea', na inakwenda kwa kumabara ya kikomo ya tano katika usambaa wa kumabara:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
{}

Tenda tena

Mfano 3

Kumwengenea 'myArea' kwa kufikia mabara ya kikomo ya nne katika usambaa wa kumabara:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
{}

Tenda tena

Mfano 4

Kumwengenea 'item1' kwa kufikia mitaabi wa kikomo na kufikia mitaabi ya kirefu:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

Tenda tena

Mfano 5

Kutaja majina ya vyote ya vitu na kumwengenea modeli ya wapakaa wa tovuti yenye uwanja:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

Tenda tena

Mtaarifu ya kumtaarifu wa browser

数字 katika tablica inahesabisha sababu ya kumtaarifu browser ya kwanza ambayo inasimamia hiyo kiwango.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44