CSS grid-template 属性

Paglilinaw at paggamit

Ang grid-template na attribute ay isang maikling form ng sumusunod na mga attribute:

Mga ibang pangkaragdagang basahin:

CSS Tutorial:CSS 网格项目

CSS Reference Manual:Ang grid-area na attribute

CSS Reference Manual:Ang grid-template-rows na attribute

CSS Reference Manual:Ang grid-template-columns na attribute

CSS Reference Manual:Ang grid-template-areas na attribute

Mga halimbawa

Halimbawa 1

Gumawa ng tatlong-linya grid layout na may taas na 150 pixels sa unang piling:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Subukan nang personal

Halimbawa 2

Tinutukoy ang dalawang linya, kung saan ang "item1" ay sumasaklaw sa unang dalawang linya at unang dalawang sulok (sa isang limang sulok na layout):

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

Subukan nang personal

Halimbawa 3

Tukuyin ang lahat ng proyekto, at gumawa ng isang nakahanda na template ng web page:

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

Subukan nang personal

Syntaxa ng CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Halaga ng katangian
Halaga Paglalarawan
none Default na halaga. Hindi tinutukoy ang sukat ng linya o sulok.
grid-template-rows / grid-template-columns Tinutukoy ang sukat ng linya at sulok.
grid-template-areas Tinutukoy ang paggamit ng pangingilangan ng pangalan ng grid layout.
initial I-set ang katangian na ito sa kanyang default na halaga. Tingnan ang: initial.
inherit Inherencya mula sa magulang na elemento ang katangian na ito. Tingnan ang: inherit.

Detalye ng teknolohiya

Default na halaga: none none none
Inherencya: Hindi
Gawa ng animasyon: Suporta. Tingnan ang:Mga katangian ng animasyon.
Bersyon: CSS Grid Layout Module Level 1
Syntaxa ng JavaScript: object.style.gridTemplate="250px / auto auto"

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtatalaga ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

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