CSS Izgara Öğesi
1
2
3
4
5
Alt Öğeler (Öğeler)
Bir ızgara kapsayıcı , ızgara öğeleri içerir .
Varsayılan olarak, bir kapsayıcının her satırda her sütun için bir ızgara öğesi vardır, ancak ızgara öğelerini birden çok sütuna ve/veya satıra yayılacak şekilde biçimlendirebilirsiniz.
ızgara sütunu Özellik:
Özellik grid-column, bir öğenin hangi sütun(lar)a yerleştirileceğini tanımlar.
Öğenin nerede başlayacağını ve öğenin nerede biteceğini siz belirlersiniz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Not: Özellik , ve özellikleri grid-columniçin kestirme bir özelliktir .grid-column-startgrid-column-end
Bir öğe yerleştirmek için satır numaralarına başvurabilir veya öğenin kaç sütuna yayılacağını tanımlamak için "span" anahtar sözcüğünü kullanabilirsiniz.
Örnek
"item1" in 1. sütundan başlayıp 5. sütundan önce bitmesini sağlayın:
.item1 {
grid-column: 1 / 5;
}
Örnek
"item1" in 1. sütunda başlamasını ve 3 sütuna yayılmasını sağlayın:
.item1 {
grid-column: 1 / span 3;
}
Örnek
"item2"nin 2. sütunda başlamasını ve 3 sütuna yayılmasını sağlayın:
.item2 {
grid-column: 2 / span 3;
}
ızgara satırı Özelliği:
Özellik grid-row, bir öğenin hangi satıra yerleştirileceğini tanımlar.
Öğenin nerede başlayacağını ve öğenin nerede biteceğini siz belirlersiniz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Not: Özellik , ve özellikleri grid-rowiçin kestirme bir özelliktir .grid-row-startgrid-row-end
Bir öğe yerleştirmek için satır numaralarına başvurabilir veya öğenin kaç satıra yayılacağını tanımlamak için "span" anahtar sözcüğünü kullanabilirsiniz:
Örnek
"item1" in 1. satırdan başlayıp 4. satırda bitmesini sağlayın:
.item1 {
grid-row: 1 / 4;
}
Örnek
"item1" in 1. satırdan başlamasını ve 2 satıra yayılmasını sağlayın:
.item1 {
grid-row: 1 / span 2;
}
ızgara alanı Özellik
Özellik , , ve özellikleri grid-areaiçin kestirme bir özellik olarak kullanılabilir
.grid-row-startgrid-column-startgrid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Örnek
"item8"in 1. satır ve 2. satırda başlayıp 5. satır ve 6. satırda bitmesini sağlayın:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Örnek
"item8"in 2. satır ve 1. sütundan başlamasını ve 2 satır ve 3 sütuna yayılmasını sağlayın:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Izgara Öğelerini Adlandırma
Özellik grid-area, ızgara öğelerine ad atamak için de kullanılabilir.
başlık
Menü
Ana
Sağ
altbilgi
Adlandırılmış ızgara öğelerine grid-template-areas, ızgara kabının özelliği ile başvurulabilir.
Örnek
Öğe1, "myArea" adını alır ve beş sütunun tamamını beş sütunlu bir ızgara düzeninde kapsar:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Her satır kesme işareti (' ') ile tanımlanır
Her satırdaki sütunlar, kesme işaretleri içinde bir boşlukla ayrılmış olarak tanımlanır.
Not: Nokta işareti, adı olmayan bir ızgara öğesini temsil eder.
Örnek
"myArea"nın beş sütunlu bir ızgara düzeninde iki sütuna yayılmasına izin verin (nokta işaretleri adsız öğeleri temsil eder):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
İki satır tanımlamak için, ikinci satırın sütununu başka bir kesme işareti kümesi içinde tanımlayın:
Örnek
"item1" in iki sütuna ve iki satıra yayılmasını sağlayın:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Örnek
Tüm öğeleri adlandırın ve kullanıma hazır bir web sayfası şablonu yapın:
.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';
}
Öğelerin Sırası
Izgara Düzeni, öğeleri istediğimiz yere yerleştirmemizi sağlar.
HTML kodundaki ilk öğenin ızgaradaki ilk öğe olarak görünmesi gerekmez.
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; }
Medya sorgularını kullanarak belirli ekran boyutlarının sırasını yeniden düzenleyebilirsiniz:
Ö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; }
}