Tailwind ile Sayfa Düzeni: Sticky Header, Sidebar ve Alta Yapışan Footer

İskeletin tamamı

Önce bütün resmi görelim. Aşağıdaki HTML, mobilde tek sütun, md (48rem) ve üstünde iki sütunlu bir sayfa kurar:

<body class="flex min-h-screen flex-col">
  <header class="sticky top-0 z-40 border-b border-gray-200 bg-white/80 backdrop-blur-sm">
    <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">Logo</div>
  </header>
  <div class="mx-auto grid w-full max-w-6xl flex-1 gap-6 px-4 py-8 md:grid-cols-[16rem_1fr]">
    <aside class="hidden md:block">Menü</aside>
    <main class="min-w-0">İçerik</main>
  </div>
  <footer class="border-t border-gray-200 py-6">Alt bilgi</footer>
</body>

v4.3.5 ile derlenen CSS'in utilities katmanı (yalnızca bu bölümdeki sınıflar; backdrop-blur-sm kuralı aşağıda ayrıca ele alındığı için kısaltıldı):

@layer utilities {
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: 0px;
  }
  .z-40 {
    z-index: 40;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-full {
    width: 100%;
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  /* (kısaltıldı) */
  @media (width >= 48rem) {
    .md\:block {
      display: block;
    }
    .md\:grid-cols-\[16rem_1fr\] {
      grid-template-columns: 16rem 1fr;
    }
  }
}

Tema bloğunda --container-6xl: 72rem tanımlı; 16px kök yazı boyutunda bu 1152px eder. Şimdi iskeleti bölge bölge açalım.

Footer'ı alta itmek: flex-col ve flex-1

İçerik kısa olduğunda footer'ın ekranın ortasında asılı kalması en sık görülen düzen sorunlarından biridir. Çözüm, body elementini dikey bir flex kapsayıcısı yapmak ve en az ekran yüksekliği kadar uzatmaktır: flex min-h-screen flex-col. Ardından ortadaki bölgeye flex-1 verilir. Çıktıya göre flex-1, flex: 1 üretir; bu öge kalan bütün dikey boşluğu kaplar ve footer'ı aşağı iter. İçerik ekrandan uzun olduğunda ise hiçbir şey değişmez, sayfa normal şekilde kayar.

Skill'de aynı işin grid ile yapılan bir sürümü de var: grid grid-rows-[auto_1fr_auto]. Üç satırlı bir grid'de header ve footer içerikleri kadar, ortadaki satır ise kalan alan kadar yer kaplar. Bu sürümü min-h-dvh ile derledik:

<div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

/* (kısaltıldı) */
  .min-h-dvh {
    min-height: 100dvh;
  }
  .grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }
/* (kısaltıldı) */

Keyfi değerdeki alt çizgiler derlemede boşluğa dönüştü. min-h-screen ile min-h-dvh arasındaki fark birim farkıdır: biri 100vh, diğeri 100dvh üretir. Mobil tarayıcılarda adres çubuğunun açılıp kapanmasıyla görünür alan değiştiği için dinamik birimi tercih edebilirsiniz; bu birimlerin karşılaştırması width, height ve size yazısında. Hangisini seçerseniz seçin, ana fikir aynıdır: iskeletin en az ekran yüksekliği kadar olması ve ortadaki bölgenin esnemesi.

Yapışkan header

Header'da sticky top-0 birlikte kullanılır. Belgelere göre sticky bir element, belirlenen eşiği geçene kadar relative gibi davranır, sonra üst elementi ekrandan çıkana kadar fixed gibi kalır. Eşiği top-0 verir; top değeri olmadan yapışma gerçekleşmez. Header body elementinin doğrudan çocuğu olduğu için sayfa boyunca yapışık kalır.

z-40, kayan içerikteki konumlandırılmış elementlerin header'ın üstüne çıkmasını engeller. bg-white/80 yüzde 80 opak beyaz bir zemin, backdrop-blur-sm ise arkadan geçen içeriği bulanıklaştırır. Bu ikili skill'deki yapışkan header kalıbından geliyor. Bulanıklık kuralı uzun bir değişken zinciri üretir:

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

Tema bloğunda --blur-sm: 8px değeri var. Diğer backdrop filtreleri boş bırakıldığı için yalnızca bulanıklık uygulanır; bu filtre ailesi blur ve backdrop-blur yazısında. Header'ın içindeki mx-auto flex h-16 max-w-6xl items-center justify-between px-4 satırı da içerikle aynı genişlikte ortalanmış bir şerit kurar: logo solda, menü sağda, ikisi de dikeyde ortada.

Sidebar ve içerik: grid-cols-[16rem_1fr]

Ortadaki bölge mobilde tek sütunlu bir grid'dir: herhangi bir grid-cols-* sınıfı olmadığı için ögeler alt alta dizilir. md ve üstünde md:grid-cols-[16rem_1fr] devreye girer ve ilk sütunu 16rem sabit, ikinci sütunu kalan alan yapar. Sidebar hidden md:block ile mobilde tamamen gizlenir ve md'den itibaren görünür. gap-6 iki sütun arasında, mobilde ise satırlar arasında 1.5rem boşluk bırakır.

İçerik elementindeki min-w-0 küçük ama önemli bir ayrıntıdır. Grid'de 1fr bir sütun, içindeki uzun bir kod satırı ya da geniş bir tablo yüzünden içeriğinin en küçük genişliğinden daha dar olamayabilir ve sayfayı yatayda taşırabilir. min-w-0, çıktıda min-width: 0px üreterek elementin daralabilmesini sağlar. Tailwind'in hazır sütun sınıfları bu yüzden zaten minmax(0, 1fr) kullanır; keyfi bir şablon yazarken aynı şeyi açıkça da yazabilirsiniz:

<div class="grid-cols-3 md:grid-cols-[16rem_minmax(0,1fr)]"></div>

@layer utilities {
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (width >= 48rem) {
    .md\:grid-cols-\[16rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 16rem minmax(0,1fr);
    }
  }
}

Virgül, keyfi değerin içinde olduğu gibi kaldı ve seçicide kaçışlandı. İki yoldan birini seçmeniz yeterli: ya şablonda minmax(0,1fr) yazın ya da içerik elementine min-w-0 verin. Grid çizgilerine öge yerleştirme ve sütun kaplama için col-span ve grid yerleşimi yazısına bakabilirsiniz.

Kayarken yerinde duran sidebar

Uzun bir içerik sayfasında sidebar menüsünün görünür kalmasını istiyorsanız onu da yapışkan yapabilirsiniz. Ancak grid içinde ögeler varsayılan olarak satır yüksekliği boyunca uzar; uzayan bir öge yapışamaz, çünkü kayacak yeri kalmaz. Bu yüzden sidebar'a self-start verilir:

<aside class="hidden md:block md:sticky md:top-20 md:self-start">Menü</aside>

  @media (width >= 48rem) {
    .md\:sticky {
      position: sticky;
    }
    .md\:top-20 {
      top: calc(var(--spacing) * 20);
    }
    .md\:block {
      display: block;
    }
    /* (kısaltıldı) */
    .md\:self-start {
      align-self: flex-start;
    }
  }

md:top-20 5rem, yani 16px kökte 80px verir; bu değer 4rem (h-16) yüksekliğindeki header'ın altında küçük bir boşluk bırakmak için seçildi. self-start, bu derlemede align-self: flex-start üretti. Mobilde sidebar zaten gizli olduğu için tüm bu sınıfları md: ile sınırladık.

Katman sırası: z-index nereye gerekir?

Sayfa iskeletinde z-* sınıflarına yalnızca birkaç yerde ihtiyaç vardır ve bunları rastgele büyük sayılarla doldurmak ileride çözülmesi zor sorunlara yol açar. Bu iskelette yalnızca header'a z-40 verdik, çünkü kayan içerikteki konumlandırılmış elementler (örneğin relative bir kartın içindeki absolute bir rozet) header'ın altından geçmelidir. Sidebar yapışkan olsa bile header ile aynı alanı paylaşmadığı için ayrı bir z-index gerektirmez: md:top-20 sayesinde header'ın altında durur.

Daha karmaşık arayüzlerde açılır menüler, bildirimler ve modal pencereler de devreye girer. Bunlar için küçük bir ölçek belirleyip her katmana bir değer ayırmak iyi bir alışkanlıktır: içerik için hiçbir değer, yapışkan header için z-40, header'dan çıkan açılır menüler ve modal pencereler için daha yüksek bir değer. Skill'de z-0'dan z-50'ye kadar onar adımlı bir ölçek ve z-auto ile negatif -z-10 listelenir; skill'deki yapışkan header kalıbı ise z-50 kullanır. Önemli olan değerin kendisi değil, projenin her yerinde aynı ölçeğe uymaktır. Konumlandırma ve yığın sırası position ve z-index yazısında ayrıntılı.

Çok sütunlu footer

Footer'ı tek satırlık bir telif notundan daha zengin yapmak istediğinizde içerikle aynı genişlik sınırını kullanıp içine bir ızgara kurabilirsiniz. Mobilde bağlantı grupları alt alta, sm ve üstünde üç sütun hâlinde dizilir:

<footer class="border-t border-gray-200">
  <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3">
    <nav aria-label="Kurumsal">...</nav>
    <nav aria-label="Destek">...</nav>
    <nav aria-label="Yasal">...</nav>
  </div>
</footer>

/* (kısaltıldı) */
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  /* (kısaltıldı) */
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  /* (kısaltıldı) */
  @media (width >= 40rem) {
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
/* (kısaltıldı) */

Kenarlık footer elementinin kendisinde, genişlik sınırı ise içteki div'de duruyor. Bu ayrım, çizginin ekranın bir ucundan diğerine uzanmasını, içeriğin ise ortadaki 72rem'lik şeritte kalmasını sağlar. Aynı yöntemi header'da da kullandık: dış element tam genişlikte zemin ve kenarlık taşır, iç element hizalamayı yapar. Birden fazla nav elementi kullandığınızda her birine farklı bir aria-label vermek, ekran okuyucu kullanıcılarının bölgeleri ayırt etmesini kolaylaştırır.

İskeleti dar ve geniş ekranda okumak

Responsive bir iskeleti doğru kurup kurmadığınızı anlamanın iyi bir yolu, sınıf listesini önce varsayılan (mobil) durum için, sonra her breakpoint için ayrı ayrı okumaktır. 48rem'den dar bir ekranda md: ile başlayan bütün sınıfları yok sayın: geriye dikey bir flex body, yapışkan header, tek sütunlu bir grid içinde yalnızca main (çünkü aside hidden) ve footer kalır. 48rem ve üstünde ise @media (width >= 48rem) bloğundaki iki kural devreye girer: sidebar display: block olur ve grid iki sütuna bölünür.

Bu okuma, hatalı varsayımları da hızla ortaya çıkarır. Örneğin sidebar'ı mobilde göstermek isteseydiniz hidden sınıfını kaldırmanız yeterdi; grid tek sütun olduğu için sidebar içeriğin üstünde yer alırdı. Sidebar'ın mobilde içeriğin altına düşmesini istiyorsanız HTML sırasını değiştirmeden order-* sınıflarıyla yer değiştirebilirsiniz; bu sınıflar flex-1, grow, shrink ve order yazısında. Ancak görsel sıra ile HTML sırası birbirinden ne kadar uzaklaşırsa klavye ile gezinme o kadar şaşırtıcı hâle gelir; bu yüzden mümkün olduğunda HTML'i görsel sıraya göre yazın.

Genişlik sınırı: max-w-6xl mi, container mı?

Bu iskelette içeriği mx-auto max-w-6xl px-4 ile sınırladık: en fazla 72rem genişlik, yatayda ortalama ve kenarlarda 1rem iç boşluk. Skill'deki ortak kalıp ise container mx-auto px-4 şeklinde. container sınıfı her breakpoint'te farklı bir max-width verir ve v4'te kendiliğinden ortalanmaz, bu yüzden mx-auto ile birlikte kullanılır. Hangisini seçeceğiniz, genişliğin breakpoint'lerle adım adım mı yoksa tek bir üst sınırla mı büyümesini istediğinize bağlıdır; karşılaştırma container sınıfı yazısında.

Sık yapılan hatalar

• top değeri olmadan sticky: sticky tek başına yapışmaz; top-0 gibi bir eşik gerekir.
• Footer'ı alta itmek için fixed kullanmak: fixed bottom-0 footer'ı içeriğin üstüne bindirir; flex-1 yaklaşımı akışı bozmaz.
• min-h-screen yerine h-screen: h-screen yüksekliği sabitler, içerik uzadığında taşar.
• Grid içinde uzayan sticky sidebar: self-start olmadan sidebar yapışmaz.
• İçerik sütununda min-w-0 unutmak: Uzun kod blokları veya tablolar sayfayı yatayda kaydırır.
• Mobil önce düşünmemek: İki sütunlu düzeni temel sınıf, tek sütunu max-md: ile yazmak yerine tek sütunu varsayılan, iki sütunu md: ile yazın; bkz. responsive tasarım.

Sık Sorulan Sorular

Header içeriğin üstüne biniyor, ne yapmalıyım?

sticky elementler akışta yer kaplamaya devam eder; bu yüzden binme genellikle fixed kullanıldığında olur. fixed kullanmak zorundaysanız içeriğe header yüksekliği kadar üst boşluk (örneğin pt-16) verin. Konumlandırma türleri position ve inset yazısında.

Sidebar'ı mobilde açılır menü yapabilir miyim?

Evet, ama açma kapama davranışı JavaScript veya details gibi bir HTML elementi gerektirir. Tailwind tarafında yapmanız gereken, menünün görünürlüğünü bir sınıf veya nitelikle değiştirmek ve aria-expanded gibi durumları aria varyantları ile stillemektir.

Üç sütunlu (sidebar, içerik, sağ panel) düzen nasıl kurulur?

Skill'deki grid-cols-[200px_1fr_200px] kalıbı bunu yapar. Mobilde tek sütun için bu sınıfı lg: gibi bir breakpoint ile sınırlamanız yeterlidir.

Bu iskeleti her sayfada yeniden mi yazmalıyım?

Hayır. Header, sidebar ve footer gibi her sayfada tekrar eden bölümler, Tailwind belgelerinin tekrar konusunda önerdiği gibi bir şablon parçasına ya da bileşene taşınmalıdır. Kullandığınız şablon dili (Blade, Twig, Nunjucks) veya framework (React, Vue, Svelte) bir düzen (layout) bileşeni kurmanıza izin verir; iskeletin sınıfları orada bir kez yazılır, sayfalar yalnızca ortadaki içeriği doldurur. Böylece max-w-6xl gibi bir değeri değiştirmek istediğinizde tek bir dosyayı düzenlemeniz yeter ve header ile içerik genişliği birbirinden kopmaz.

İçeriği yatay ve dikey ortalamak için ne kullanmalıyım?

Tek bir kutuyu ekranın ortasına almak için flex min-h-screen items-center justify-center en kısa yoldur. Diğer tarifler div ortalama yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind CSS öğrenme rehberi · Flexbox sınıfları · Grid sınıfları · Container ve max-width · Position ve inset · Kart, buton ve input örnekleri · Mobil uyumluluk nedir