CSS grid-column 属性

定义和用法

grid-column 属性规定网格项目的尺寸以及在网格布局中的位置，它是以下属性的简写属性：

Maaari mong tingnan pa:

Tuturuan ng CSS:CSS Grid Layout

Halimbawa

Halimbawa 1

Huwagang magsimula ang "item1" sa kolumna 1 at sumasapansapang dalawang kolumna:

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

Subukan Nang Sarili

Halimbawa 2

Maaari mong gamitin ang halaga ng linya ng kolumna sa halip ng bilang ng kolumna na mabibilang na tuluyan:

.item1 {
  grid-column: 1 / 3;
}

Subukan Nang Sarili

Grammar ng CSS

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

Halaga ng Atributo

Halaga Paglalarawan
grid-column-start Tinutukoy kung saan magpapatayong magpakita ang proyekto.
grid-column-end Tinutukoy kung saan maghinto ang pagpapakita ng proyekto sa isang linya ng kolumna (column-line) o kung ilang kolumna ang mabibilang na tuluyan.

Detalye ng Teknolohiya

Default Value: auto / auto
Inherits: Hindi
Gawa ng animasyon: Sumusuporta. Maaari mong tingnan:Atributo ng animasyon.
Bersyon: CSS Grid Layout Module Level 1
Grammar ng JavaScript: object.style.gridColumn="2 / span 2"

Suporta ng Browser

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

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