CSS 3 Grid 8 – Grid Templates Rows & Columns

Merhabalar.

Bu yazımda Grid Templates konusuna bakacağız.

CSS Grid Şablonları Nedir?

CSS Grid şablonları, bir Grid Container içindeki sütun ve satırların düzenini belirlemek için kullanılan bir özelliktir. Bu şablonlar, sayfa düzenini esnek ve karmaşık hale getirme yeteneği sunar. Şablonlar, grid-template-columns ve grid-template-rows özellikleriyle belirlenir ve sütun/satır sayısını ve genişliğini/yüksekliğini kontrol etmek için kullanılır.

Grid Şablonları Kullanımı

Grid şablonları, daha karmaşık düzenler oluşturmak için kullanılır. Örneğin, 2 sütunlu ve 3 satırlı bir düzen oluşturalım:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* İki sütunlu düzen */  grid-template-rows: repeat(3, 100px); /* Üç satırlı düzen, her biri 100px yüksekliğinde */  gap: 10px;
}

Bu örnek, grid-template-columns ile iki sütun belirler ve grid-template-rows ile üç satır belirler. Her satırın yüksekliği 100px olarak ayarlanmıştır.

Şablon Hizalama

Grid şablonları ayrıca öğelerin nasıl hizalanacağını da belirleyebilir. Örneğin, bir öğeyi şablondaki belirli bir konuma yerleştirelim:

.item {
  grid-column: 2; /* Öğeyi 2. sütuna yerleştir */  grid-row: 1 / span 2; /* 1. satırdan başlayarak 2 satır yüksekliğinde yerleştir */}

Bu örnekte, .item adlı bir öğeyi 2. sütuna ve 1. satırdan başlayarak 2 satır yüksekliğinde yerleştiriyoruz.

Sonuç:

CSS Grid şablonları, web tasarımında düzen ve yerleşimi kontrol etmek için güçlü bir araçtır. Bu şablonlar, sayfa düzenini esnek ve karmaşık hale getirmek için kullanılabilir. Özellikle örnek projelerle uygulandığında, Grid şablonlarıyla tasarım sürecini daha verimli hale getirebilir ve kullanıcı dostu arayüzler oluşturabilirsiniz.

Bir sonraki yazımda görüşmek üzere.