CSS网格项目

1
2
3
4
5

亲自试一试

Podelementy (projekty)

Kontener siatki zawiera elementy siatki.

Domyślnie, kontener w każdym wierszu ma jeden element siatki w każdej kolumnie, ale możesz ustawić styl elementów siatki, aby przechodziły przez wiele kolumn i/lub wierszy.

Atrybut grid-column:

grid-column Atrybut definiuje, w którym kolumnie umieszczony będzie projekt.

Można zdefiniować początkowe i końcowe położenie projektu.

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

Uwaga:grid-column Atrybuty to skrócone atrybuty grid-column-start i grid-column-end.

Aby umieścić jakiś projekt, możesz odnosić się do numeru wiersza (line numbers) lub użyć klucza "span", aby zdefiniować, ile kolumn projekt będzie obejmował.

Przykład

Ustaw 'item1' od pierwszej kolumny i zakończ przed piątą kolumną:

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

亲自试一试

Przykład

Ustaw 'item1' od pierwszej kolumny i obejmij 3 kolumny:

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

亲自试一试

Przykład

Ustaw 'item2' od drugiej kolumny i obejmij 3 kolumny:

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

亲自试一试

Atrybut grid-row:

grid-row Atrybut określa, w którym wierszu umieszczony jest projekt.

Można zdefiniować początkowe i końcowe położenie projektu.

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

Uwaga:grid-row Atrybut jest skróconą formą atrybutów grid-row-start i grid-row-end.

Aby umieścić projekt, można odwołać się do numeru wiersza lub użyć klucza 'span' do określenia, ile wierszy projekt będzie obejmował:

Przykład

Ustaw 'item1' od row-line 1 do row-line 4:

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

亲自试一试

Przykład

Ustaw 'item1' od pierwszego wiersza i obejmij 2 wiersze:

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

亲自试一试

Atrybut grid-area

grid-area Atrybut może być używany jako skrócona forma atrybutów grid-row-start, grid-column-start, grid-row-end i grid-column-end.

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

Przykład

Ustaw 'item8' od row-line 1 i column-line 2, a następnie zakończ w row-line 5 i column line 6:

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

亲自试一试

Przykład

Ustaw 'item8' od row-line 2 i column-line, a następnie obejmij 2 wiersze i 3 kolumny:

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

亲自试一试

Nazwanie elementów siatki

grid-area Atrybuty mogą również być używane do przypisywania nazw elementom siatki.

Nagłówek
Menu
Główna
Prawy
Stopka

Można to zrobić za pomocą kontenera siatki: grid-template-areas Atrybut do odniesienia do nazwanego elementu siatki.

Przykład

Nazwa elementu 'item1' to 'mojaObszar' i obejmuje wszystkie pięć kolumn układu siatki:

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

亲自试一试

Każdy wiersz jest zdefiniowany przez apostrofy (' ').

Kolumny w każdym wierszu są zdefiniowane w apostrofach i oddzielone spacjami.

Uwaga:Kropka oznacza projekt siatki bez nazwy.

Przykład

Pozwól 'myArea' przeciągnąć się przez dwie kolumny w pięciokolumnowym układzie siatki (kropka oznacza projekt bez nazwy):

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

亲自试一试

Aby zdefiniować dwie linie, zdefiniuj drugą linię kolumn w innym zestawie apostrof:

Przykład

Aby 'item1' przeciągnął się przez dwie kolumny i dwie wiersze:

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

亲自试一试

Przykład

Nazwij wszystkie elementy i przygotuj szablon strony, który jest zawsze dostępny:

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

亲自试一试

Kolejność elementów

Layout siatkowy pozwala nam umieszczać elementy w dowolnym miejscu, które lubimy.

Pierwszy element w kodzie HTML nie musi być wyświetlony jako pierwszy w siatce.

1
2
3
4
5
6

Przykład

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

亲自试一试

Możesz uporządkować kolejność niektórych rozmiarów ekranu za pomocą zapytań mediowych:

Przykład

@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; }
}

亲自试一试