CSS Ağ Elemanı

1
2
3
4
5

Kişisel Deneyim

Alt elementler (projeler)

Ağ konteyneri, ağ projelerini içerir.

Varsayılan olarak, konteyner her satırın her sütununda bir ağır projeye sahiptir, ancak ağır projelerin stillerini ayarlayarak onları çoklu sütunlar ve/veya satırlar boyunca geçirebilirsiniz.

grid-column özellikleri:

grid-column Özellik, projenin hangi sütunda yerleştirileceğini tanımlar.

Projenin başlangıç ve bitiş konumunu tanımlayabilirsiniz.

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

Açıklama：grid-column Özellikler grid-column-start ve grid-column-end özelliklerinin kısaltılmış halleridir.

Bir projeyi yerleştirmek için, satır numaralarını (line numbers) kullanabilir veya "span" anahtar kelimesini kullanarak bu projenin ne kadar sütun geçeceğini tanımlayabilirsiniz.

Örnek

"item1"'yi 1. sütundan başlatın ve 5. sütun öncesinde sona erdirin:

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

Kişisel Deneyim

Örnek

"item1"'yi 1. sütundan başlatın ve 3 sütun kapsayın:

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

Kişisel Deneyim

Örnek

"item2"'yi 2. sütundan başlatın ve 3 sütun kapsayın:

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

Kişisel Deneyim

grid-row özelliği:

grid-row Bu özellik, projeyi hangi satıra yerleştirdiğini tanımlar.

Projenin başlangıç ve bitiş konumunu tanımlayabilirsiniz.

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

Açıklama：grid-row Bu özellik, grid-row-start ve grid-row-end özelliklerinin kısaltılmış özellikleridir.

Proje yerleştirmek için, satır numarasını ifade edebilir veya "span" anahtar kelimesini kullanarak bu projenin kaç satırı kapsayacağını tanımlayabilirsiniz:

Örnek

"item1"'yi row-line 1'den başlatın ve row-line 4'de sona erdirin:

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

Kişisel Deneyim

Örnek

"item1"'yi 1. satırdan başlatın ve 2 satırı kapsayın:

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

Kişisel Deneyim

grid-area özelliği

grid-area Özellik, grid-row-start, grid-column-start, grid-row-end ve grid-column-end özelliklerinin kısaltılmış özellikleri olarak kullanılabilir.

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

Örnek

"item8"'yi row-line 1 ve column-line 2'den başlatın, row-line 5 ve column line 6'da sona erdirin:

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

Kişisel Deneyim

Örnek

"item8"'yi row-line 2 ve column-line'dan başlatın ve 2 satır ve 3 sütun kapsayın:

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

Kişisel Deneyim

Adlandırılmış ağ öğesi

grid-area Özellikler de ağ öğelerine adlar atamak için kullanılabilir.

Başlık
Menü
Ana
Sağ
Alt

Ağ konteynerinin grid-template-areas özel adlandırılmış ağırlık öğelerine atıfta bulunmak için kullanılan özellik.

Örnek

item1 adının "myArea" olduğunu ve beş sütun ağı düzenindeki tüm beş sütunu kapsadığını belirtin:

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

Kişisel Deneyim

Her satır, çift tırnak (' ') ile tanımlanır.

Her satırdaki sütunlar, çift tırnak içinde tanımlanır ve boşluklarla ayrılır.

Açıklama：Nokta, adlandırılmamış bir ağ projesi anlamına gelir.

Örnek

"myArea" beş sütunlu ağ düzenindeki iki sütunu aşacak şekilde tanımlayın（nokta, adlandırılmamış bir proje anlamına gelir）：

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

Kişisel Deneyim

İki satır tanımlamak için bir diğer çift tırnak içinde ikinci satırın sütunlarını tanımlayın：

Örnek

"item1" iki sütun ve iki satırı aşacak şekilde tanımlamak için istiyorsanız：

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

Kişisel Deneyim

Örnek

Bütün projeleri adlandırın ve her zaman kullanılabilir bir web şablonu oluşturun：

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

Kişisel Deneyim

Projelerin sırası

Ağ düzeni, projeleri sevdiklerimizdeki herhangi bir konuma yerleştirmemizi sağlar.

HTML kodundaki ilk madde, ağdaki ilk madde olarak gösterilmez.

1
2
3
4
5
6

Örnek

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

Kişisel Deneyim

Bazı ekran boyutlarının sırasını yeniden düzenlemek için medya sorgularını kullanabilirsiniz：

Örnek

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

Kişisel Deneyim