CSS grid tasarım iki boyutlu yerleşim düzeni için en güçlü araçtır. Satır ve sütunları aynı anda kontrol edebilme yeteneği karmaşık sayfa yapılarını kolaylaştırır. **Adım 1: Grid Container Tanımlayın** ```css .container { display: grid; } ``` CSS grid tasarımının tüm kontrolü bu tanımdan başlar; alt elementler otomatik olarak grid item olur. **Adım 2: Sütun Yapısını Belirleyin** `grid-template-columns` ile sütun sayısını ve genişliklerini tanımlayın: ```css .container { display: grid; grid-template-columns: 1fr 2fr 1fr; } ``` `fr` birimi kalan boşluğu orantılı böler. CSS grid tasarımda `fr` birimini kullanmak esnek düzen sağlar. **Adım 3: Satır Yapısını Belirleyin** `grid-template-rows` ile satır yüksekliklerini ayarlayın veya `auto` bırakarak içeriğin belirlenmesine izin verin. **Adım 4: Boşluk (Gap) Ekleyin** ```css .container { gap: 20px; } ``` Satır ve sütun aralarındaki boşluk için `gap` (veya ayrı ayrı `row-gap`, `column-gap`) kullanın. **Adım 5: Öğeleri Konumlandırın** CSS grid tasarımda öğeleri belirli satır/sütun konumlarına yerleştirmek için `grid-column` ve `grid-row` kullanın: ```css .header { grid-column: 1 / -1; } ``` Bu kural header'ı tüm sütunlara yayar. **Adım 6: Template Areas Kullanın** İsimlendirilmiş alan sistemi sayfa düzenini daha okunabilir kılar: ```css .container { grid-template-areas: "header header" "sidebar main" "footer footer"; } ``` **Adım 7: Responsive Grid Düzeni Kurun** `auto-fill` ve `minmax()` kombinasyonu kırılım noktası yazmadan responsive CSS grid tasarım sağlar: ```css grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); ```