img
Css Grid İle Karmaşık Düzenler Oluşturma

Css Grid İle Karmaşık Düzenler Oluşturma

CSS Grid, web tasarımında karmaşık düzenler oluşturmak için güçlü ve esnek bir araçtır. Bu makalede, 'CSS Grid', 'karmaşık düzenler', 'web tasarım CSS Grid' ve 'Grid kod örneği' anahtar kelimeleri çerçevesinde CSS Grid kullanarak nasıl karmaşık düzenler oluşturabileceğinizi adım adım ve örnek kodlarla açıklayacağız.

CSS Grid Nedir?

CSS Grid Layout, web sayfalarında iki boyutlu (2D) düzenler oluşturmak için kullanılan bir CSS modülüdür. Grid, satırlar ve sütunlar kullanarak düzenleri tanımlamanıza olanak tanır ve bu sayede karmaşık düzenleri bile kolayca oluşturabilirsiniz.

CSS Grid'in Avantajları

  • Esneklik: Grid, karmaşık ve dinamik düzenler oluşturmayı kolaylaştırır.
  • İki Boyutlu Düzenler: Hem yatay hem de dikey eksende düzenlemeler yapabilirsiniz.
  • Modern Destek: Tüm modern tarayıcılarda desteklenir.
  • Kapsamlı Kontrol: Satır ve sütun boyutları, boşluklar ve hizalamalar üzerinde tam kontrol sağlar.

Grid Container ve Grid Item Kavramları

CSS Grid kullanırken iki temel kavram vardır: Grid Container ve Grid Item.

Grid Container

Grid düzeni içeren öğedir. display: grid; veya display: inline-grid; özelliği ile tanımlanır.

.grid-container {
    display: grid;
    gap: 10px; /* Satır ve sütunlar arasındaki boşluk */
}

Grid Item

Grid Container içinde yer alan öğelerdir. Herhangi bir HTML öğesi olabilir ve Grid Container içindeki düzenlemelere göre yerleştirilir.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

Grid ile Düzen Oluşturma

CSS Grid ile düzen oluşturmanın temellerini anlamak için bazı temel özellikleri bilmeniz gerekir.

Satır ve Sütunlar Tanımlama

Satır ve sütunları tanımlamak için grid-template-columns ve grid-template-rows özelliklerini kullanabilirsiniz.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    grid-template-rows: auto; /* Otomatik satır yüksekliği */
    gap: 10px;
}

Öğeleri Yerleştirme

Grid öğelerini belirli satır ve sütunlara yerleştirmek için grid-column ve grid-row özelliklerini kullanabilirsiniz.

.grid-item-1 {
    grid-column: 1 / 3; /* 1. sütundan 2. sütuna kadar */
    grid-row: 1; /* 1. satır */
}

.grid-item-2 {
    grid-column: 2 / 4; /* 2. sütundan 3. sütuna kadar */
    grid-row: 2; /* 2. satır */
}

Örnek Kod ve Uygulamalar

Şimdi CSS Grid kullanarak basit bir düzen oluşturalım. Bu örnekte, bir başlık, içerik alanı ve bir kenar çubuğu içeren bir düzen yapacağız.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Örnek</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <header class="grid-item header">Başlık</header>
        <nav class="grid-item sidebar">Kenar Çubuğu</nav>
        <main class="grid-item content">İçerik</main>
        <footer class="grid-item footer">Alt Bilgi</footer>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 2 sütun: 1 birim kenar çubuğu, 3 birim içerik */
    grid-template-rows: auto 1fr auto; /* 3 satır: başlık, içerik, alt bilgi */
    gap: 10px;
    height: 100vh;
}

.header {
    grid-column: 1 / 3; /* 1. sütundan 2. sütuna kadar (tam genişlik) */
    background-color: #f8b400;
    padding: 20px;
    text-align: center;
}

.sidebar {
    background-color: #f85c50;
    padding: 20px;
}

.content {
    background-color: #58a4b0;
    padding: 20px;
}

.footer {
    grid-column: 1 / 3; /* 1. sütundan 2. sütuna kadar (tam genişlik) */
    background-color: #373f51;
    color: white;
    text-align: center;
    padding: 10px;
}

Bu örnekte, grid-template-columns ile iki sütun oluşturduk: kenar çubuğu için 1 birim ve içerik alanı için 3 birim. grid-template-rows ile üç satır tanımladık: başlık, içerik ve alt bilgi. Öğeleri belirli sütun ve satırlara yerleştirmek için grid-column ve grid-row özelliklerini kullandık.

CSS Grid, web tasarımcılar ve geliştiriciler için karmaşık düzenler oluşturmayı kolaylaştıran güçlü bir araçtır. Bu makalede, 'CSS Grid', 'karmaşık düzenler', 'web tasarım CSS Grid' ve 'Grid kod örneği' anahtar kelimeleri çerçevesinde CSS Grid kullanarak nasıl esnek ve dinamik düzenler oluşturabileceğinizi öğrendiniz. CSS Grid ile tasarımlarınızı daha düzenli, esnek ve kullanıcı dostu hale getirebilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    20.6K
    1000.00₺
  • Canlı Radyo Dark Scripti

    13.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.9K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.1K
    0.00₺
  • Radyo Minimal

    3.9K
    1000.00₺
  • Ekitap Scripti

    6K
    3000.00₺
  • Aşk Sevgililer Günü Evlilik

    7.5K
    1000.00₺
  • Sohbet Scripti

    7.7K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.6K
    0.00₺
  • Firebase Chat

    3.7K
    0.00₺
  • Web Ajans Scripti

    23.9K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.9K
    1000.00₺
  • Ajans Scripti V2

    3K
    1000.00₺
  • Ajans Scripti V3

    3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.6K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    39.3K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    5.2K
    1000.00₺
  • İlan Web Tasarımı

    2.2K
    1000.00₺
  • İlan Web Tasarımı V2

    2.2K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.9K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.5K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.3K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.4K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.6K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.3K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.3K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.1K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.9K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.2K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.7K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.6K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.7K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.1K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.6K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.8K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.9K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.6K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.4K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.7K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.6K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.7K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.7K
    1000.00₺
  • Ajans Web Tasarımı V5

    3K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.2K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.1K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.4K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    5.3K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.5K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.5K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.4K
    1000.00₺
  • Psikolog Web Tasarımı

    1.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.7K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.7K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.6K
    900.00₺
  • Google Indexing Api

    319
    500.00₺
  • Milando Radyo Wordpress Teması

    248
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img
Load Time (S) : 0.006439