Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz.
Blog Yaz!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 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 kullanırken iki temel kavram vardır:Grid Container ve Grid Item.
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 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>
CSS Grid ile düzen oluşturmanın temellerini anlamak için bazı temel özellikleri bilmeniz gerekir.
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;
}
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 */
}
Ş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.
<!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>
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.
Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer GünüEvlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Web Ajans Scripti
Ajans Scripti Kolay Kullanım
Ajans Scripti V2
Ajans Scripti V3
Avukat Ve Hukuk Bürosu Scripti
Avukat Ve Hukuk Bürosu Web Tasarım V2
Mobil Uyumlu Çilingir Scripti
Kuaför Güzellik Salonu Spa Merkezi Web Tasarım
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2
İlaçlama Şirketi Web Tasarımı
İlan Web Tasarımı
İlan Web Tasarımı V2
İnşaat Firması Web Tasarımı
İnşaat Firması Tasarımı V2
Kitapçı Kırtasiye Web Tasarımı
Kombi Klima Servisi Web Tasarımı
Korku Evi Eğlence Mekanı Web Tasarımı
Kurumsal Firma Web Tasarımı V2
Kurumsal Firma Web Tasarımı V3
Ajans Web Tasarımı V4
Kurumsal Firma Web Tasarımı V4
Kurumsal Firma Web Tasarımı V5
Kurumsal Firma Web Tasarımı V6
Kurumsal Firma Web Tasarımı V7
Kurumsal Firma Web Tasarımı V8
Mobilya Dekorasyon Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V2
Nakliyat Taşımacılık Web Tasarımı V3
Ana Okulu Ve Kreş Web Tasarımı
Otel Pansiyon Web Tasarımı
Özel Oto Servis Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı V2
Restaurant Cafe Bar Lokanta Web Tasarımı
Restaurant Cafe Bar Lokanta Web Tasarımı V2
Teknik Servis Web Tasarımı
Sigorta Acenta Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V2
Sürücü Kursu Web Tasarımı
Tek Ürün Satış Web Tasarımı
Tek Ürün Satış Web Tasarımı V2
Tek Ürün Yaprak Web Tasarımı
Tek Ürün Yaprak Web Tasarımı V2
Tek Ürün Satış Web Tasarımı V3
Temizlik Şirketi Web Tasarımı
Temizlik Şirketi Web Tasarımı V2
Ajans Web Tasarımı V5
Ajans Web Tasarımı V6
Werock Radyo Web Tasarımı
Avukat Ve Hukuk Bürosu Tasarımı V3
Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3
İnşaat Firması Web Tasarımı V3
Kurumsal Firma Web Tasarımı V9
Mimarlık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V4
Ana Okulu Ve Kreş Web Tasarımı V2
Psikolog Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V3
Sürücü Kursu Web Tasarımı V2
Teknik Servis Web Tasarımı V3
Ajans Web Tasarımı V7
Google Indexing Api
Milando Radyo Wordpress Teması
Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.
