İçeriğe geç
Educora
TR
AzərbaycancaEnglishРусскийTürkçe
ÖğrenmemEducora StudioAyarlar
İleri22 dk9 / 10

CSS Grid ve duyarlı tasarım

CSS Grid ile satır ve sütunlardan oluşan sayfa düzenleri kur; medya sorguları ve “önce mobil” yaklaşımıyla onları her ekrana uyarla.

Kendini test et
Bu derste öğreneceklerin
  • grid-template-columns, fr birimi ve repeat() ile ızgara oluşturmak
  • Öğeleri birden çok sütuna yaymak ve grid-template-areas ile sayfa düzeni kurmak
  • Grid ile Flexbox arasında seçim yapmak
  • Medya sorguları ve göreli birimlerle “önce mobil” duyarlı bir sayfa yazmak

Aynı siteyi telefonda, tablette ve geniş bir monitörde açıyorsun: bilgisayarda ürünler üç sütunda, telefonda tek sütunda duruyor ve hiçbir şey ekrandan taşmıyor. Buna duyarlı tasarım (responsive design) denir. Başlıca araçları CSS Grid (satır ve sütunlardan oluşan ızgara) ve medya sorgularıdır; bu derste ikisini de öğreneceksin.

CSS Grid: satırlar ve sütunlar

display: grid bir kapsayıcıyı ızgaraya çevirir. grid-template-columns sütunların sayısını ve genişliğini belirler. Burada özel bir birim kullanılır: **fr** (fraction, yani pay). 1fr 2fr boş alanı üç paya böler; ilk sütun bir pay, ikincisi iki pay alır. repeat(3, 1fr) ise 1fr 1fr 1fr yazımının kısaltmasıdır. Flexbox'ta olduğu gibi gap hücreler arasına boşluk koyar.

HTML
<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grid div { padding: 16px; text-align: center; background: #fbcfe8; border-radius: 8px; }
  .grid .wide { grid-column: span 2; background: #f9a8d4; }
  .grid .tall { grid-row: span 2; background: #c4b5fd; }
</style>

<div class="grid">
  <div class="wide">1 (span 2 columns)</div>
  <div class="tall">2 (span 2 rows)</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Önizleme
repeat(3, 1fr) değerini 1fr 2fr 1fr yap ve ortadaki sütunun iki kat genişlediğini gör. Öğeler boş hücreleri kendileri doldurur: 3 ve 4, birinci öğenin altındaki boşluğa yerleşir.

grid-column: span 2 bir öğeyi iki sütuna, grid-row: span 2 ise iki satıra yayar. Tüm sayfa düzenini de grid-template-areas ile adeta bir resim gibi çizebilirsin: alanlara ad ver ve onları tırnak içinde satır satır yerleştir. Her öğe grid-area ile kendi alanına gönderilir.

HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; }
  .page {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "header header"
      "side   main"
      "footer footer";
    gap: 8px;
  }
  .page > * { padding: 12px; border-radius: 8px; }
  header { grid-area: header; background: #fde68a; }
  aside  { grid-area: side;   background: #bfdbfe; }
  main   { grid-area: main;   background: #e2e8f0; min-height: 90px; }
  footer { grid-area: footer; background: #d1fae5; }
</style>

<div class="page">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main content</main>
  <footer>Footer</footer>
</div>
Önizleme
Düzeni değiştir: ortadaki satırda "side main" yerine "main side" yaz; kenar çubuğu sağa geçer, HTML ise aynı kalır. Sütun genişliklerinin de yerini değiştir (grid-template-columns: 1fr 140px); yoksa ana içerik 140 px'lik dar sütuna düşer. .page > * seçicisi .page'in tüm doğrudan alt öğelerini seçer.
ÖlçütFlexboxGrid
Boyuttek yön: satır ya da sütuniki yön: satırlar ve sütunlar birlikte
Neye dayanıriçeriğin boyutunaönceden tanımlanmış ızgaraya
Tipik kullanımmenüler, düğme sıraları, kartın içisayfa düzeni, galeri, kart ızgarası
Rakip değiller: çoğu zaman sayfanın genel düzeni Grid ile, parçalarının içi ise Flexbox ile kurulur.
HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; background: #0f172a; }
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
  }
  .tile { aspect-ratio: 1; display: flex; justify-content: center; align-items: center;
          font-size: 40px; background: #1e293b; border-radius: 12px; }
</style>

<div class="gallery">
  <div class="tile">🌊</div><div class="tile">🏔️</div><div class="tile">🌳</div>
  <div class="tile">🌅</div><div class="tile">🏜️</div><div class="tile">🌋</div>
  <div class="tile">🏝️</div><div class="tile">❄️</div>
</div>
Önizleme
110px değerini 200px yap; sütunlar azalır, kareler büyür. aspect-ratio: 1 her kareyi kare biçiminde tutar; karenin içinde ise emojiyi Flexbox ortalar.

Duyarlı tasarım ve medya sorguları

Bir medya sorgusu, CSS kurallarını yalnızca bir koşul doğru olduğunda uygular; örneğin pencere belirli bir değerden genişse: @media (min-width: 600px) { … }. Duyarlı sayfa yazmanın modern yolu önce mobil (mobile-first) yaklaşımıdır: temel stilleri küçük ekran için yazarsın, sonra geniş ekranlar için min-width sorgularıyla eklemeler yaparsın.

HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; }
  h1 { font-size: 1.4rem; color: #7c3aed; }
  .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px; background: #ede9fe; border-radius: 10px; }

  @media (min-width: 500px) {
    .cards { grid-template-columns: 1fr 1fr; }
  }

  @media (min-width: 900px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
    h1 { font-size: 2rem; }
  }
</style>

<h1>Mobile first</h1>
<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>
Önizleme
Önizlemenin genişliği ders sütunu kadardır: bilgisayarda büyük olasılıkla iki sütun, telefonda ise tek sütun görürsün. Telefon görünümünü görmek için 500px değerini 1500px yap.
  • Her sayfanın <head> kısmında <meta name="viewport" content="width=device-width, initial-scale=1"> bulunmalıdır. O olmadan telefon tarayıcısı sayfayı yaklaşık 980px genişliğinde bir ekran için çizer ve küçültür; medya sorguları da beklendiği gibi çalışmaz.
  • Sabit width: 800px yerine max-width: 800px yaz: geniş ekranda blok 800px'ten büyümez, dar ekranda ise küçülür.
  • Görselleri esnek yap: img { max-width: 100%; height: auto; }; görsel asla kapsayıcısından taşmaz ve oranını korur.
  • Göreli birimler kullan: yazı boyutları için rem, alanlar için %, fr ya da vw. font-size: clamp(1.5rem, 5vw, 3rem) başlığı ekranla birlikte büyütür ama verilen sınırlar içinde tutar.
Tarayıcının geliştirici araçlarını açar (Mac'te Cmd+Option+I)F12
Chrome ve Edge'de geliştirici araçları açıkken cihaz modunu açıp kapatır; sayfayı telefon ve tablet boyutlarında deneyebilirsin (Mac'te Cmd+Shift+M)Ctrl+Shift+M

Önemli noktalar

  • display: grid ve grid-template-columns bir ızgara oluşturur; fr boş alanın bir payıdır, repeat(3, 1fr) üç eşit sütundur.
  • span bir öğeyi birkaç hücreye yayar; grid-template-areas tüm düzeni adlandırılmış alanlarla çizer.
  • Flexbox tek yön, Grid iki yön içindir; ikisini birlikte kullanmak olağandır.
  • Önce mobil: temel stiller küçük ekran için, @media (min-width: …) ise geniş ekranlar için eklemelerdir.
  • Viewport meta etiketi, max-width, esnek görseller ve göreli birimler duyarlı bir sayfanın temelidir.

Kendini test et

10 soru. Her doğru cevap XP kazandırır.

1 / 10
300px genişliğindeki bir kapsayıcıda grid-template-columns: 1fr 2fr yazılı (gap yok). Sütunların genişliği nedir?