CSS Ağ Konteyneri

1
2
3
4
5
6
7
8

Kişisel olarak deneyin

Ağ konteyneri

HTML elementinin ağ konteyneri olarak kullanılmasını sağlamak için display Özellik grid veya inline-grid olarak ayarlanır.

Ağ konteyneri, sütunlar ve satırlar içinde yerleştirilmiş ağ projelerinden oluşur.

grid-template-columns özelliği

grid-template-columns Özellik, ağ düzenindeki sütun sayısını tanımlar ve her sütunun genişliğini belirler.

Bu değer, boşluklarla ayrılmış bir listedir, her bir değer ilgili sütunun uzunluğunu tanımlar.

Ağ düzeninin 4 sütun içerir olmasını istiyorsanız, bu 4 sütunun genişliğini belirtin; tüm sütunların aynı genişlikte olması gerekiyorsa "auto" olarak ayarlayın.

Örnek

Dört sütunlu bir ağ oluşturun:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Kişisel olarak deneyin

Dikkat:4 sütunlu bir ağda 4'ten fazla proje varsa, ağ otomatik olarak yeni satır ekler ve bu projeleri içerisine yerleştirir.

grid-template-columns Özellik, sütun boyutlarını (genişliklerini) belirlemek için de kullanılabilir.

Örnek

Bu 4 sütunun boyutlarını ayarlayın:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Kişisel olarak deneyin

grid-template-rows özelliği

grid-template-rows Özellik, her sütunun yüksekliğini tanımlar.

1
2
3
4
5
6
7
8

Değerleri boşluklarla ayrılmış bir liste olarak verilir, her bir değer ilgili satırın yüksekliğini tanımlar:

Örnek

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Kişisel olarak deneyin

justify-content özelliği

justify-content Özellik, konteyner içinde tüm ağın hizalanmasını sağlar.

1
2
3
4
5
6
7
8

Dikkat:Ağın toplam genişliği konteyner genişliğinden küçük olmalıdır, aksi takdirde justify-content özelliği etkin olacaktır.

Örnek

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  justify-content: space-around;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  justify-content: space-between;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  justify-content: center;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  justify-content: start;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  justify-content: end;
}

Kişisel olarak deneyin

align-content özelliği

align-content Özelliği, konteyner içindeki tüm ağın dikey hizalamasını sağlar.

1
2
3
4
5
6
7
8

Dikkat:Ağın toplam yüksekliği konteynerin yüksekliğinden küçük olmalıdır, böylece align-content özelliği etkili olacaktır.

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Kişisel olarak deneyin

Örnek

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Kişisel olarak deneyin