CSS Grid Item

1
2
3
4
5

Try It Yourself

Anak na elemento (proyek)

Ang container ng grid ay naglalaman ng grid item.

Sa normal na kalagayan, ang container ay may grid item sa bawat kolumna ng bawat linya, ngunit maaari ninyong itakda ang estilo ng grid item para sila ay magtagpo ng maraming kolumna at/o mga linya.

grid-column attribute:

grid-column Ang attribute na ito ay nagtutukoy sa kung saan ilalagay ang proyek sa kolumna.

Maaari mong tukuyin ang simula at natapos na posisyon ng proyekto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Komento:grid-column Ang mga attribute ay ang maikling anyo ng grid-column-start at grid-column-end na attribute.

Kung nais ninyong ilagay ang anumang proyek, maaari ninyong gamitin ang numerong linya (line numbers) o gamitin ang keyword "span" upang tanggapin kung anong bilang ng kolumna ang magtatagpo ng proyek na iyon.

Example

gawing "item1" mula sa unang linya at natapos bago ang ikalimang linya:

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

Try It Yourself

Example

gawing "item1" mula sa unang linya at tumatama sa 3 linya:

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

Try It Yourself

Example

gawing "item2" mula sa ikalawang linya at tumatama sa 3 linya:

.item2 {
  grid-column: 2 / span 3;
}

Try It Yourself

Atributo ng grid-row:

grid-row Ang atributo ay nagtutukoy sa linya kung saan ang item ay ilalagay.

Maaari mong tukuyin ang simula at natapos na posisyon ng proyekto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Komento:grid-row ang atributo ay isang maikling atributo ng grid-row-start at grid-row-end atributo.

Para sa paglalagay ng item, maaaring gamitin ang numero ng linya, o gamitin ang palatandaan na "span" upang tukuyin kung anong bilang ng linya ang magtatama ng proyekto:

Example

gawing "item1" simula sa row-line 1 at natapos sa row-line 4:

.item1 {
  grid-row: 1 / 4;
}

Try It Yourself

Example

gawing "item1" mula sa unang linya at tumatama sa 2 linya:

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

Try It Yourself

Atributo ng grid-area

grid-area ang atributo ay maaaring gamitin bilang isang maikling atributo para sa grid-row-start, grid-column-start, grid-row-end at grid-column-end atributo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Example

gawing "item8" mula sa row-line 1 at column-line 2 simula, at natapos sa row-line 5 at column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Try It Yourself

Example

gawing "item8" mula sa row-line 2 at column-line simula, at tumatama sa 2 linya at 3 linya:

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

Try It Yourself

Pinangalang grid item

grid-area ang atributo ay maaari ring gamitin upang magbigay ng pangalan sa grid item.

Header
Menu
Main
Right
Footer

maaaring gamitin ang container ng grid sa grid-template-areas ang atributo upang tumukoy sa pinangalang na grid item.

Example

Ang pangalan ng item1 ay "myArea" at ito ay tumatama sa lahat ng limang linya ng grid layout:

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

Try It Yourself

Ang bawat linya ay naayos sa pamamagitan ng paliwanag (')

Ang bawat kolumna sa bawat linya ay naayos sa paliwanag, na nagsasagupa ng isang puwang.

Komento:Ang titik ng panahon ay nangangahulugan na walang pangalang grid proyekto.

Example

Hayaan ang 'myArea' na matanggap ang dalawang kolumna sa limang kolumna ng grid layout (ang titik ng panahon ay nangangahulugan na walang pangalang proyekto):

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

Try It Yourself

Kung gusto mong maiayos ang dalawang linya, iayos ang pangalawang linya sa isa pang grupo ng paliwanag:

Example

Upang maiayos ang 'item1' na matanggap ang dalawang linya at dalawang kolumna:

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

Try It Yourself

Example

Tukuyin ang lahat ng mga proyekto at gumawa ng template na maaaring gamitin ang web page:

.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';
}

Try It Yourself

Ang pagkakakilanlan ng mga proyekto

Ang grid layout ay nagbibigay ng kapangyarihan sa amin na ilagay ang mga proyekto sa anumang posisyon na gustuhin namin.

Hindi kailangan ipakita ang unang item sa HTML code bilang unang item sa grid.

1
2
3
4
5
6

Example

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Try It Yourself

Maaari mong uringin ang pagbabago ng kinalalagyan ng ilang laki ng screen sa pamamagitan ng paggamit ng media query:

Example

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Try It Yourself