CSS yerleşim: flexbox, grid ve mobil uyum

Ders 20'de kutuların içini boyadın: renk, yazı tipi, kenarlık, iç ve dış boşluk. Ama kutular hep alt alta dizildi. Bu derste kutuları yerleştiriyorsun: yan yana dizmek, ortalamak, ızgaraya oturtmak, bir köşeye iğnelemek ve en önemlisi aynı sayfanın telefonda da bilgisayarda da düzgün görünmesini sağlamak. Dersin sonunda telefonda tek sütun, bilgisayarda üç sütun olan bir şampiyon kartları sayfan olacak.

Bu derste yeni bir programlama kavramı yok; hepsi CSS. Ama CSS'in en çok zaman yediği yer burası. Yerleşim kuralları sessizce çalışır ya da sessizce çalışmaz; hata mesajı çıkmaz. Bu yüzden her bölümde "neden çalışmadı" sorusunu DevTools ile nasıl cevaplayacağını da göreceksin.

#Hazırlık: deneme dosyası

Ders 20'deki sampiyon-karti klasörüne dokunma. Dersin sonunda o karta benzeyen altı kartı tek bir sayfaya dizeceksin; bunun için yeni bir klasörle başlıyorsun. C:\kod içinde sampiyon-kartlari adında bir klasör oluştur ve VS Code'da File → Open Folder ile aç. İçine deneme.html adında bir dosya oluştur ve aşağıdaki iskeleti yaz. Bu dersin küçük denemelerinin hepsini bu dosyada yapacaksın.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Yerleşim denemeleri</title>7    <style>8        * {9            box-sizing: border-box;10        }11        body {12            font-family: "Segoe UI", Arial, sans-serif;13            margin: 12px;14        }15        /* bölümlerdeki CSS'i buraya yaz */16    </style>17</head>18<body>19    <!-- bölümlerdeki HTML'i buraya yaz -->20</body>21</html>

Sayfayı Live Server ile aç (Ders 18): deneme.html düzenleyicide açıkken sağ alttaki Go Live düğmesine bas. Tarayıcı http://127.0.0.1:5500/deneme.html adresiyle açılır; başka bir adres açılırsa adres çubuğuna bunu kendin yaz. Ders 20'deki gibi örneklerin üstünde iki kutu göreceksin: "<style> içine" yazan CSS'i yorum satırının yerine, "<body> içine" yazan HTML'i gövdeye yaz. Kaydedince Live Server sayfayı kendiliğinden yeniler. Yeni bir örneğe geçince öncekini sil.

Kutuların altındaki tarayıcı pencereleri resim değil, senin tarayıcında o anda çizilen gerçek sayfalar. Bazılarında örnek daha okunur görünsün diye bir iki renk ya da boşluk kuralı fazladan var; asıl kurallar kutudaki kodla aynı. Önizlemenin genişliği ekranına göre değişir, telefondan okuyorsan bazıları farklı görünecek: bu, dersin konusunun ta kendisi.

#display: her kutunun bir davranışı var

Ders 19'da yazdığın sayfayı hatırla: başlıklar, paragraflar ve bölümler alt alta dizildi, ama paragrafın içindeki <strong> ya da <a> cümlenin içinde kaldı, alta inmedi. İlkine blok öğe, ikincisine satır içi öğe dendiğini orada gördün. Bu sözcüklerin CSS'te bir karşılığı var: tarayıcı her etikete önceden bir görünüm türü verir. Bu türün adı display; değerini sen de değiştirebilirsin.

Önce farkı gör. <div> ve <span> etiketlerine aynı sınıfı ver:

.kutu {    background-color: #c5cae9;    border: 1px solid #5c6bc0;    padding: 4px 8px;}

<div class="kutu">Ahri</div><div class="kutu">Garen</div><span class="kutu">Jinx</span><span class="kutu">Lux</span>

İki div kendi satırlarını açtı ve bütün genişliği kapladı. İki span ise yan yana durdu ve yalnız yazıları kadar yer tuttu. İkisi de aynı CSS'i aldı; farkı yaratan display değeri.

• block (blok): Kendi satırını açar, bütün genişliği kaplar; sonraki öğe alta iner. div, p, h1–h6, ul, section, header, main, footer böyledir.
• inline (satır içi): Yazının bir parçası gibi davranır. Yalnız içeriği kadar yer kaplar, satır dolunca alt satıra kayar. span, a, strong, em, code böyledir.

#inline öğeye genişlik verilmez

Satır içi öğelerin bir kısıtı var: width ve height onlarda işlemez. Üstten ve alttan verdiğin margin de satırları itmez. Ahri ve Garen'in adlarını 120 piksellik rozetlere çevirmeyi dene:

.rozet {    background-color: #ffe082;    padding: 4px 8px;    width: 120px;}

<p>Takımda <span class="rozet">Ahri</span> ve <span class="rozet">Garen</span> var.</p>

Rozetler genişlemez; yine yazı kadar kalır. CSS'in hata mesajı yoktur, satır sessizce görmezden gelinir. Ama DevTools sessiz kalmaz.

img bu kuralın istisnasıdır: satır içi durur ama içi dışarıdan gelen bir resim olduğu için width ve height alır. Ders 19'da resme width ve height nitelikleriyle boyut verebilmen bundandı.

#inline-block: ikisinin karışımı

inline-block öğe yazının içinde, satırda durur ama bir kutu gibi width, height, margin ve padding alır. Düğmeler (button) tarayıcıda zaten böyledir. Rozet kuralına tek satır ekle:

.rozet {    display: inline-block;    background-color: #ffe082;    padding: 4px 8px;    width: 120px;}

Farkı görebilesin diye önizlemede iki hâli alt alta koyduk: üst satırdaki sarı rozetlerde display yok, alt satırdaki yeşillerde inline-block var. Sarılar yazı kadar kaldı, yeşiller 120 piksel oldu ama ikisi de cümlenin içinde duruyor.

#none: hiç yokmuş gibi

display: none öğeyi sayfadan kaldırır: çizilmez, yer de kaplamaz; çevresindeki öğeler boşluğu kapatır. HTML'de durmaya devam eder (DevTools'ta görürsün), yalnız ekrana gelmez. Telefonda bir menüyü gizlemek ya da bir uyarıyı sonradan göstermek için kullanılır; Ders 22'de JavaScript ile öğeleri böyle açıp kapatacaksın.

#Flexbox: öğeleri bir sıraya dizmek

Üç şampiyonu yan yana koymak istiyorsun. div'ler blok olduğu için alt alta dizilir. inline-block ile yan yana gelirler ama aralarındaki boşluğu ayarlamak, onları dikeyde hizalamak ve kalan yeri paylaştırmak zahmetlidir. Flexbox tam bu iş için yapıldı.

Kural tek cümlelik: display: flex kapsayıcıya yazılır, yani dizilecek öğelerin hepsini içine alan öğeye. İçindeki öğeler kendiliğinden yan yana dizilir.

.takim {    display: flex;    gap: 8px;    padding: 8px;    background-color: #ede7f6;}.sampiyon {    background-color: #7e57c2;    color: white;    padding: 12px 16px;    border-radius: 8px;}

<div class="takim">    <div class="sampiyon">Ahri</div>    <div class="sampiyon">Garen</div>    <div class="sampiyon">Jinx</div></div>

.sampiyon kuralına dokunmadık; üç blok öğe, kapsayıcıları flex olunca yan yana geçti. gap: 8px aralarına 8 piksel boşluk koydu. Önce display: flex satırını silip kaydet, sonra geri yaz; farkı kendi gözünle gör.

Ders 20'den hatırla: bir öğenin hemen içindekiler onun çocukları, onu saran öğe de ebeveynidir. Flex yalnız doğrudan çocukları dizer; çocukların içindekiler (torunlar) etkilenmez.

#Ana eksen ve çapraz eksen

Flexbox'u anlamanın anahtarı iki yöndür. Öğelerin dizildiği yöne ana eksen, ona dik yöne çapraz eksen denir. Varsayılan olarak ana eksen soldan sağa, çapraz eksen yukarıdan aşağıdır.

#justify-content: ana eksende dağıtmak

justify-content öğeleri ana eksen boyunca nereye toplayacağını ya da aralarındaki boş yeri nasıl dağıtacağını söyler. Kapsayıcıya yazılır:

.takim {    display: flex;    justify-content: center;}

#align-items: çapraz eksende hizalamak

align-items öğeleri çapraz eksende hizalar. Etkisini görmek için kapsayıcının çapraz eksende yeri olmalı; bu yüzden .takim'a bir yükseklik ver. Önizlemede fark daha iyi görünsün diye ortadaki Garen'i de biraz uzattık:

.takim {    display: flex;    gap: 6px;    height: 64px;    align-items: center;}

İlk satıra dikkat et: varsayılan değer stretch (gerdir), öğeleri kapsayıcının yüksekliği kadar uzatır. Flex'e yeni geçenlerin şaşırdığı ilk şey budur: "Kutularıma yükseklik vermedim, neden bu kadar uzunlar?" Cevap: align-items vermediğin için gerildiler.

#flex-direction: ekseni çevirmek

flex-direction: column öğeleri alt alta dizer; bu durumda ana eksen yukarıdan aşağı döner, justify-content de dikeyde çalışmaya başlar. Bir kartın düğmesini kartın dibine itmek için kullanılır:

.kart {    display: flex;    flex-direction: column;    justify-content: space-between;    height: 160px;}

Bu kartın ilk çocuğu (başlık) tepede, son çocuğu (düğme) dipte durur; aradaki boşluk kendiliğinden dağılır. Uygulamada üst çubuğu telefonda alt alta, bilgisayarda yan yana dizmek için aynı özelliği kullanacaksın.

#gap ve flex-wrap

gap öğelerin arasına boşluk koyar, kenarlara koymaz. Eskiden her öğeye margin verip sonuncusundan silmek gerekirdi; artık tek satır yeter. Flex'te de, birazdan göreceğin grid'de de aynı çalışır.

Peki öğeler sığmazsa? Varsayılan değer flex-wrap: nowrap: flex bütün öğeleri tek satırda tutmaya çalışır. Önce öğeleri daraltır; en uzun sözcükten daha fazla daraltamayınca öğeler kapsayıcıdan taşar. flex-wrap: wrap yazarsan sığmayanlar alt satıra geçer. Denemek için takıma Lux, Yasuo ve Teemo'yu da ekle, kapsayıcıyı 300 piksele daralt:

.takim {    display: flex;    flex-wrap: wrap;    gap: 8px;    width: 300px;}

İlk satırda Yasuo'nun bir kısmı ve Teemo'nun tamamı açık mor kapsayıcının dışına taştı. Telefonda bu taşma bütün sayfanın yana kaymasına yol açar. İkinci satırda ise sığmayanlar alta indi.

#flex: 1 ile kalan yeri doldurmak

Bazen bir öğenin "geri kalan her yeri" kaplamasını istersin. Oyuncu satırını düşün: solda ad, sağda can, ortada can çubuğu. Ad kısa da olsa uzun da olsa çubuk aradaki boşluğu doldurmalı. Bu işi flex: 1 yapar; kapsayıcıya değil, büyümesini istediğin öğeye yazılır:

.oyuncu {    display: flex;    align-items: center;    gap: 10px;    padding: 10px;    background-color: #263238;    color: white;    border-radius: 8px;}.can {    flex: 1;    height: 12px;    background-color: #43a047;    border-radius: 6px;}

<div class="oyuncu">    <span>Ahri</span>    <div class="can"></div>    <span>100 can</span></div><div class="oyuncu">    <span>Aurelion Sol</span>    <div class="can"></div>    <span>85 can</span></div>

Uzun adlı satırda çubuk kısaldı ama boşluk yine tam doldu. Aynı satırdaki birden çok öğeye flex: 1 verirsen yeri eşit paylaşırlar; birine flex: 2 verirsen o, ötekilerin iki katı pay alır.

#Tam ortalamak

CSS'te bir şeyi hem yatayda hem dikeyde ortalamak eskiden ünlü bir dertti. Flex ile üç satır:

.zafer {    display: flex;    justify-content: center;    align-items: center;    height: 160px;    background-color: #1a237e;    color: #ffd54f;    font-size: 32px;    font-weight: bold;    border-radius: 8px;}

<div class="zafer">ZAFER</div>

justify-content: center yatayda (ana eksen), align-items: center dikeyde (çapraz eksen) ortaladı. İkisini karıştırırsan ezberlemeye çalışma, şekle dön: "justify ana eksen, align çapraz eksen."

.zafer {    display: flex;    justify-content: center;    align-items: center;    background-color: #1a237e;    color: #ffd54f;    font-size: 32px;}

Sık hatadisplay: flex kapsayıcıya değil çocuklara yazılmış

Ne zaman çıkar? justify-content ya da gap hiçbir şey yapmıyor, öğeler alt alta duruyor. DevTools uyarısı: "The display: block property prevents justify-content from having an effect."

.takim {    justify-content: center;    gap: 8px;    padding: 8px;    background-color: #ede7f6;}.sampiyon {    display: flex;    background-color: #7e57c2;    color: white;    padding: 12px 16px;    border-radius: 8px;}

display: flex dizilecek öğelerin kendisine (.sampiyon) yazıldı. Her şampiyon kendi içindeki yazıyı dizen bir kapsayıcı oldu; .takim ise sıradan bir blok olarak kaldı. Bu yüzden şampiyonlar yine alt alta, .takim'daki justify-content ve gap boşa gitti. DevTools bunu iki yerden gösterir:

• Elements ağacında flex rozeti hangi satırın yanındaysa flex kapsayıcı odur. Burada rozet .sampiyon satırlarının yanında; .takim'ın yanında yok.
• Styles bölmesinde .takim'ın justify-content ve gap satırları soluk ve yanlarında ⓘ var. Üzerine gelince şekildeki uyarı açılır.

DevTools Türkçe açılıyorsa aynı uyarı şöyledir:

display: block özelliği, justify-content özelliğinin etkili olmasını engeller.

Bu öğeyi kapsayıcı haline getirmek için display: grid veya display: flex eklemeyi deneyin.

Nasıl düzelir? display: flex satırını .sampiyon'dan alıp .takim'a taşı. Sor kendine: "Yan yana dizilecek olanlar kim, onları içine alan kim?" display: flex içine alana yazılır.

#Grid: satır ve sütun ızgarası

Yedi şampiyon kartını flex ile dizdiğini düşün: sığmayanlar alta geçsin diye flex-wrap: wrap, eşit paylaşsınlar diye her karta flex: 1. min-width: 120px kartların 120 pikselden fazla daralmasını engeller; sığmayan kart alt satıra iner:

.kartlar {    display: flex;    flex-wrap: wrap;    gap: 8px;}.kart {    flex: 1;    min-width: 120px;    padding: 12px;    background-color: #e3f2fd;    border: 2px solid #1e88e5;    border-radius: 8px;}

<div class="kartlar">    <div class="kart">Ahri</div>    <div class="kart">Garen</div>    <div class="kart">Jinx</div>    <div class="kart">Lux</div>    <div class="kart">Yasuo</div>    <div class="kart">Teemo</div>    <div class="kart">Annie</div></div>

Son satıra bak: oradaki kartlar üsttekilerden daha geniş. Flex tek boyutludur: her satırı ayrı ayrı doldurur, alt satırdaki kartlar üstteki sütunlara hizalanmaz. Kartları hem satır hem sütun olarak hizalamak istiyorsan grid kullanırsın.

#Sütunları tanımlamak

Grid'in ana özelliği grid-template-columns: sütun sayısını ve genişliklerini yan yana yazarsın. Üç tane 150 piksellik sütun:

.izgara {    display: grid;    grid-template-columns: 150px 150px 150px;    gap: 8px;}

Denemek için önceki örneğin HTML'inde dış kutunun sınıfını kartlar yerine izgara yap ve .kart kuralındaki flex: 1 ile min-width satırlarını sil; grid'de kartların genişliğini artık sütunlar belirliyor.

Kartlar soldan sağa sütunları doldurur, sütunlar bitince yeni satıra geçer. Satırları tanımlaman gerekmez; grid gerektiği kadar satırı kendisi açar. Ama sabit pikselin bir sorunu var: üç sütun ve iki boşluk 466 piksel eder. Telefonun ekranı bundan darsa ızgara taşar.

#fr: kalan yerden pay

fr birimi "kalan yerden bir pay" demek. 1fr 1fr 1fr yazınca boşluklar ayrıldıktan sonra kalan genişlik üç eşit paya bölünür; ekran ne kadar genişse sütunlar o kadar geniş olur. Paylar eşit olmak zorunda değil: 2fr 1fr 1fr ilk sütuna iki pay verir.

.izgara {    display: grid;    grid-template-columns: 1fr 2fr 1fr;    gap: 20px;}

#repeat ve minmax

Aynı değeri üst üste yazmak yerine repeat kullanırsın: repeat(3, 1fr), 1fr 1fr 1fr ile aynıdır. İçindeki virgüle dikkat: ilk değer kaç kez, ikincisi neyin tekrar edileceği.

minmax(en-az, en-çok) bir sütuna alt ve üst sınır koyar. minmax(140px, 1fr) "en az 140 piksel ol, yer varsa bir pay kadar büyü" demek. Tek başına pek işe yaramaz; asıl gücü bir sonraki adımda ortaya çıkar.

#auto-fit: sığdığı kadar sütun

Sütun sayısını sen yazmasan, ekran kaç sütun alıyorsa o kadar açılsa? repeat'in ilk değerine sayı yerine auto-fit yazınca grid tam olarak bunu yapar:

.izgara {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));    gap: 8px;}

Bunu şöyle oku: "En az 140 piksellik sütunlardan sığdığı kadar aç, kalan yeri onlara eşit paylaştır." Ekran daralınca sütun sayısı kendiliğinden azalır. Ekran genişliğine göre tek bir koşul yazmadan (koşullu CSS'i birazdan @media ile göreceksin) her ekrana uyan bir ızgara kurmuş olursun.

Kaç sütun gördüğün ekranına bağlı: önizleme, okuduğun sayfanın genişliğini alır ve ızgara ona uyar. Bilgisayardaysan tarayıcı pencereni daraltıp genişlet; sütun sayısı pencereyle birlikte değişir. Hangi genişlikte olursa olsun alt satırdaki kartlar üsttekilerle aynı genişlikte kalır; flex örneğindeki sorun yok.

#auto-fill: boş sütunlar yerinde kalsın

auto-fit'in bir kardeşi var: auto-fill. Kart çokken ikisi aynı davranır. Fark kart az olunca çıkar; iki ızgaraya ikişer kart koyup dene. .izgara kuralı olduğu gibi kalsın, yeni iki kuralı onun altına yaz: özgüllükleri eşit, sonra yazılan kazanır (Ders 20).

.sigdir {    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));}.doldur {    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));}

<div class="izgara sigdir">    <div class="kart">Ahri</div>    <div class="kart">Garen</div></div><div class="izgara doldur">    <div class="kart">Ahri</div>    <div class="kart">Garen</div></div>

İki ızgara da sığan sütunların hepsini açar. auto-fit (sığdır) boş kalanları kapatıp yeri dolu kartlara paylaştırır: iki kart bütün satırı kaplar. auto-fill (doldur) boş sütunları yerinde bırakır: kartlar en dar hâllerine yakın kalır. Kart sayısı değişen listelerde, örneğin bir dükkânda tek bir eşya kaldığında, kartın bütün ekran boyunca uzamasını istemiyorsan auto-fill seç.

Sık hatarepeat(3 1fr): virgülü unutmak

Ne zaman çıkar? repeat içine virgül koymayı unutunca ızgara bozulur, kartlar alt alta tek sütuna dizilir. DevTools satırın başına uyarı üçgeni koyar: "Invalid property value".

.izgara {    display: grid;    grid-template-columns: repeat(3 1fr);    gap: 8px;}

Tarayıcı anlamadığı bir değeri görünce o satırı bütünüyle atar; geriye display: grid kalır, tanımlanmış sütun olmadığı için grid tek sütun açar. DevTools'ta Styles bölmesinde satırın üstü çizilir ve başına ⚠ gelir. Üzerine gelince Invalid property value yazar; Türkçe arayüzde Geçersiz özellik değeri.

Ders 19'da HTML için bir doğrulayıcı kullandın; CSS'in de var. W3C CSS doğrulayıcısını aç, By direct input sekmesine bu kuralı yapıştır ve Check'e bas. Sonuç şöyle görünür:

Mesajın başındaki kesik çizgili küçük kutunun içinde tek bir boşluk var; mesaj "boşluk yanlış bir operatör" diyor. Tarayıcı 3 ile 1fr arasında virgül bekliyordu, boşluk buldu. Doğrulayıcının Türkçe seçeneği yok, mesajlar İngilizce gelir.

Nasıl düzelir? Virgülü ekle: repeat(3, 1fr). Bir kuralın hiç işlemediğini görünce ilk bakacağın yer DevTools'taki üstü çizili satırlardır.

#Uzun içerik ızgarayı taşırabilir

1fr sütunun bir gizli kuralı var: içerikten daha dar olamaz. Boşluksuz uzun bir sözcük (bir oyuncu adı, bir bağlantı) sütunu kendi genişliğine kadar şişirir. Üç eşit sütun isteyip ilk karta uzun bir ad yaz:

.izgara {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 8px;}

<div class="izgara">    <div class="kart">Oyuncu: SihirdarVadisininEnHızlıYasuoOyuncusu</div>    <div class="kart">Oyuncu: Deniz</div>    <div class="kart">Oyuncu: Ece</div></div>

.kart {    min-width: 0;    overflow-wrap: break-word;}

#Flex mi, grid mi?

İkisi rakip değil, birlikte kullanılır. Uygulamada kartları grid ile dizip her kartın içini flex ile düzenleyeceksin.

Kısaca: tek yönde dizmek için flex, iki yönde hizalamak için grid.

#position: öğeyi yerinden oynatmak

Şimdiye kadarki her şey normal akışta (normal flow) çalıştı: her öğe sırayla yer kaplar, biri büyürse ötekileri iter. Ama bazen bir öğenin akışın dışına çıkıp belli bir yere iğnelenmesini istersin: kartın köşesindeki "YENİ" rozeti, ekranın sağ altında hep duran bir düğme, kaydırırken tepede kalan bir başlık. Bunu position özelliği yapar.

Yeri top, right, bottom ve left ile verirsin: top: 8px "üst kenardan 8 piksel içeride" demek. static öğede bu dört özellik işlemez. position değeri static dışında bir şey olan öğeye konumlanmış (positioned) öğe denir. Bir öğenin ataları ise ebeveyni, ebeveyninin ebeveyni diye <html>'e kadar uzanan zincirdir.

#relative ve absolute: köşeye rozet

relative tek başına seyrek kullanılır: öğeyi kendi yerinden biraz kaydırır ama eski yeri boş kalır. Asıl işi başkadır: içindeki absolute öğelere referans olmak.

absolute öğe akıştan tamamen çıkar; başka hiçbir öğeyi itmez, onlar da onu görmez. Yerini en yakın konumlanmış atasının kenarlarına göre alır. Böyle bir ata yoksa sayfanın kendisine göre yerleşir.

Kalıp hep aynıdır: kapsayıcıya position: relative, iğnelenecek öğeye position: absolute ve yer bilgisi.

.kart {    position: relative;    width: 220px;    padding: 16px;    background-color: #e3f2fd;    border: 2px solid #1e88e5;    border-radius: 8px;}.rozet {    position: absolute;    top: 8px;    right: 8px;    padding: 2px 8px;    background-color: #e53935;    color: white;    font-size: 12px;    font-weight: bold;    border-radius: 999px;}

<div class="kart">    <span class="rozet">YENİ</span>    <h3>Ahri</h3>    <p>Büyücü · Orta koridor</p></div>

Rozet HTML'de başlıktan önce yazılmasına rağmen başlığı aşağı itmedi; akışın dışında, kartın sağ üst köşesinden 8 piksel içeride duruyor. border-radius: 999px kenarları tamamen yuvarlayıp hap biçimi verir.

#fixed ve sticky: kaydırınca yerinde kalanlar

fixed öğe tarayıcı penceresine iğnelenir: sayfa kayarken o hiç kımıldamaz. "Yukarı çık" düğmeleri ve sohbet balonları böyledir. sticky ise relative ile fixed'in arasıdır: normal akışta yerinde durur, sayfa kayıp öğe top ile verdiğin noktaya gelince oraya yapışır. Sabit kalan başlıklar ve tablo başlıkları böyle yapılır. sticky için top yazmak şarttır; yazmazsan yapışacak yer bilinmez ve öğe normal kayar.

.ust {    position: sticky;    top: 0;    padding: 12px 16px;    background-color: #1a237e;    color: white;}.kart {    margin: 12px 0;    padding: 12px;    background-color: #e3f2fd;    border: 2px solid #1e88e5;    border-radius: 8px;}.yukari {    position: fixed;    right: 12px;    bottom: 12px;    padding: 8px 14px;    background-color: #e53935;    color: white;    text-decoration: none;    border-radius: 999px;}

<header class="ust">Sihirdar Vadisi Rehberi</header><main>    <div class="kart">Ahri: Orta koridor</div>    <div class="kart">Garen: Üst koridor</div>    <div class="kart">Jinx: Alt koridor</div>    <div class="kart">Lux: Destek</div>    <div class="kart">Yasuo: Orta koridor</div>    <div class="kart">Teemo: Üst koridor</div></main><a class="yukari" href="#">Yukarı</a>

href="#" sayfanın en başını gösterir; düğmeye basınca sayfa tepeye döner. Aşağıdaki önizlemenin içini fareyle ya da parmağınla aşağı kaydır:

Kendi sayfanda denerken pencere bütün kartları birden gösteriyorsa kaydıracak yer kalmaz ve sticky hiçbir şey yapmıyormuş gibi görünür. Kartları kopyalayıp çoğalt ya da tarayıcı penceresini kısalt.

sticky öğe ebeveyninin dışına çıkmaz: ebeveyni ekrandan çıkınca o da onunla birlikte gider. Bu yüzden sayfanın üst çubuğunu body'nin doğrudan çocuğu yaparsın.

#z-index: kim üstte?

Konumlanmış öğeler üst üste binebilir. Hangisinin üstte çizileceğini z-index belirler: sayısı büyük olan üstte durur. Yalnız konumlanmış öğelerde (ve flex ya da grid öğelerinde) işe yarar. Bir değer vermezsen HTML'de sonra gelen üstte çizilir; çoğu zaman sorun da buradan çıkar.

Sık hataKaydırınca kartlar yapışkan başlığın üstünden geçiyor

Ne zaman çıkar? Kartlara rozet için position: relative verdiysen ve başlık sticky ise. Kartlar da başlık da konumlanmış öğedir; HTML'de sonra geldikleri için kartlar başlığın üstüne çizilir. Yukarıdaki sayfada .kart kuralına position: relative ekleyip sayfayı biraz kaydırınca gerçekte şu görünür:

Nasıl düzelir? Başlığa bir z-index ver; kartların varsayılan değerinden büyük herhangi bir sayı olur:

.ust {    position: sticky;    top: 0;    z-index: 10;}

z-index: 10 yazınca başlık bütün kartların üstünde kalır. Uygulamada bu satırı baştan yazacaksın.

#Telefona uyum: duyarlı tasarım

Bilgisayarda üç sütun hâlinde güzel duran bir sayfa, 390 piksellik bir telefon ekranında sığmaz. Ya yazılar okunamayacak kadar küçülür ya da sayfa yana kayar. Bugün sitelerin önemli bir kısmı telefondan açılıyor; bu yüzden her sayfayı her genişlikte düzgün görünecek biçimde yazarsın.

#Görüntü alanı

Ders 20'deki vw ve vh birimlerini hatırla: "pencere genişliğinin ve yüksekliğinin yüzde biri". O pencerenin, yani tarayıcının sayfayı çizdiği alanın bir adı var.

#@media: koşullu CSS

Medya sorgusu (media query), içindeki kuralları yalnız belli bir koşulda uygulayan bir CSS bloğudur. En çok kullanılan koşul görüntü alanının genişliği:

.duzen {    display: grid;    gap: 12px;}@media (min-width: 500px) {    .duzen {        grid-template-columns: 1fr 2fr;    }}

<div class="duzen">    <aside class="yan">Koridorlar: Üst, Orta, Alt</aside>    <main class="icerik">Orta koridorda oynayan şampiyonlar büyü hasarıyla öne çıkar. Ahri, Lux ve Annie iyi başlangıçlardır.</main></div>

@media (min-width: 500px) "görüntü alanı en az 500 piksel genişse" demek. Koşul doğruysa süslü parantezin içindeki kurallar da uygulanır; değilse yok sayılır. 500'ün altında .duzen sıradan bir tek sütunlu grid'dir, 500 ve üstünde iki sütun olur.

Bilgisayardan bakıyorsan önizleme 500 pikselden geniş, iki kutu yan yana. Telefondan bakıyorsan önizleme daha dar, kutular alt alta. Aynı CSS, iki ayrı sonuç: medya sorgusu tam olarak bu.

Sınırın kendisi iki yazımda da dahildir: tam 500 pikselde ikisi de çalışır. Bu yüzden ikisini aynı sayıyla birlikte kullanırsan o tek pikselde iki kural çakışır. Tek yönü seçip ona bağlı kalmak bu dertten kurtarır.

Sık hataViewport satırı yok: telefon @media kurallarını da yanlış uygular

Ne zaman çıkar? <meta name="viewport"> satırını unutunca. Bilgisayarda her şey normal görünür; sorun yalnız gerçek telefonda ya da DevTools'un telefon görünümünde çıkar.

Ders 19'da bu satır olmadan yazıların küçüldüğünü görmüştün. Medya sorguları işin içine girince bir sorun daha çıkar. Aşağıdaki iki görüntü, üstteki .duzen örneğine bir başlık eklenmiş sayfanın başsız Chromium'da 390 piksellik bir telefon taklidiyle çekilmiş gerçek hâlleri:

İlkinde telefon sayfayı 980 piksel genişliğinde sandı. 980, 500'den büyük olduğu için @media (min-width: 500px) kuralı telefonda da devreye girdi ve iki sütun açıldı; sonra bütün sayfa telefonun ekranına sığsın diye küçültüldü. İkincisinde görüntü alanı 390 piksel; iki sütun kuralı uygulanmadı, yazılar gerçek boyutunda. Yani viewport satırı yoksa telefon için yazdığın bütün medya sorguları boşa gider.

Nasıl düzelir? Her HTML dosyasının <head> kısmına viewport satırını yaz. VS Code'da ! ile gelen Emmet iskeletinde (Ders 19) bu satır zaten vardır; iskeleti elle yazıyorsan atlama.

#Mobil öncelikli yazmak ve kırılım noktaları

İki yol var. Önce bilgisayar için yazıp max-width sorgularıyla telefonda bozulanları geri alabilirsin. Ya da önce telefon için yazıp min-width sorgularıyla geniş ekranlara özellik eklersin. İkincisine mobil öncelikli yazmak denir ve bugün yaygın olan yol budur.

Neden? Telefondaki düzen genelde en sadesidir: tek sütun, alt alta kutular. Bu sade düzeni temel CSS yaparsan telefon için hiçbir şeyi geri almak zorunda kalmazsın. Ekran genişledikçe sütun, boşluk, yan yana dizilim eklersin. Kurallar üst üste biner: 900 pikselde hem 600 hem 900 sorgusu çalışır, sonra yazılan kazanır.

Sayıları nereden bulacaksın? Telefon modellerinin listesini ezberleme; her yıl yenileri çıkıyor. Sayfanı dar bir ekranda aç, yavaşça genişlet ve düzenin çirkinleştiği ya da boşa yer kaldığı genişliği bul. O sayı senin kırılım noktandır. Başlangıç için 600, 900 ve 1200 piksel çoğu sayfada iş görür.

Sık hata@media kuralı hiç çalışmıyor: sıra yanlış

Ne zaman çıkar? Medya sorgusunu temel kuralın önüne yazınca. Ekran ne kadar geniş olursa olsun ızgara tek sütun kalır.

@media (min-width: 600px) {    .izgara {        grid-template-columns: repeat(3, 1fr);    }}.izgara {    display: grid;    grid-template-columns: 1fr;    gap: 8px;}

@media bloğu seçicilerin özgüllüğünü değiştirmez. İki kuralın seçicisi de .izgara; Ders 20'deki sıra kuralına göre sonra yazılan kazanır. Geniş ekranda da sondaki grid-template-columns: 1fr kazanır. Izgarayı DevTools'ta incele:

Medya sorgusunun koşulu doğru, içindeki kural da devreye girdi; ama aynı özgüllükte, daha sonra yazılmış bir kural onu ezdi. Üstü çizili satır "bu kural geçerliydi ama başka bir kural onu ezdi" demek.

Nasıl düzelir? Temel kuralları üste, medya sorgularını dosyanın sonuna yaz; birden çok sorgu varsa küçükten büyüğe sırala.

#DevTools'ta telefon genişliği

Her denemede telefonu eline alman gerekmez. Chrome, Edge ve Brave'de:

Sınır değerini unutma: 600 piksellik bir kırılım noktan varsa 599 ve 600'ü ayrı ayrı dene. Telefon görünümü gerçek telefonun birebir aynısı değildir ama yerleşim hatalarının hemen hepsini yakalar. Tarayıcının arayüzü güncellemelerle değişebilir; simge ya da menü adı farklıysa DevTools açıkken Ctrl+Shift+P ile komut menüsünü aç ve "device" yaz.

#CSS değişkenleri

Bir sayfada aynı mavi rengi başlıkta, kenarlıkta, düğmede ve rozette, toplam dokuz yerde kullandığını düşün. Renk değişecek olsa dokuz yeri tek tek bulman gerekir; birini unutursan sayfa yamalı görünür. JavaScript'te bu sorunu değişkenle çözmüştün (Ders 1). CSS'in de değişkenleri var.

:root {    --vurgu: #1e88e5;    --zemin: #e3f2fd;    --bosluk: 12px;}.panel {    margin-bottom: var(--bosluk);    padding: var(--bosluk);    background-color: var(--zemin);    border: 2px solid var(--vurgu);    border-radius: 8px;}.panel h3 {    margin: 0 0 8px;    color: var(--vurgu);}.dugme {    padding: 6px 14px;    background-color: var(--vurgu);    color: white;    border: 0;    border-radius: 6px;}

Mavi renk artık tek bir yerde yazılı: :root içinde. Kenarlık, başlık ve düğme onu adıyla kullanıyor. İki kural var:

• Değişken -- ile başlayan bir özellik gibi tanımlanır: --vurgu: #1e88e5;. Ad sende; anlamlı ve İngilizce harfli seç.
• Kullanırken var() içine yazılır: var(--vurgu).

:root sayfanın en dış öğesi olan <html>'i seçer. CSS değişkenleri de renk ve yazı tipi gibi içerideki öğelere kalıtımla geçer; bu yüzden :root'ta tanımlanan değişken sayfanın her yerinde kullanılabilir.

Son cümle çok işe yarar: aynı değişkeni bir bölümde yeniden tanımlarsan o bölümün içi yeni değeri kullanır. Kırmızı takım panelinin renkleri için tek bir sınıf yeter:

.kirmizi {    --vurgu: #e53935;    --zemin: #ffebee;}

<div class="panel">    <h3>Mavi takım</h3>    <button class="dugme">Hazırım</button></div><div class="panel kirmizi">    <h3>Kırmızı takım</h3>    <button class="dugme">Hazırım</button></div>

Panelin, başlığın ve düğmenin CSS'ine dokunmadık; yalnız .kirmizi içinde iki değişkeni yeniden tanımladık. Panel kırmızı oldu, içindeki başlık ve düğme de değişkeni kalıtımla aldığı için onunla birlikte değişti.

Değişkenler medya sorgularıyla da iyi anlaşır. Geniş ekranda boşlukları büyütmek için her kuralı ayrı ayrı yeniden yazmazsın, yalnız değişkeni değiştirirsin:

@media (min-width: 700px) {    :root {        --bosluk: 24px;    }}

Okuduğun bu sayfanın sağ üstündeki tema düğmesi de böyle çalışır: açık temaya geçince yalnız renk değişkenlerinin değerleri değişir, kuralların hiçbiri yeniden yazılmaz.

:root {    --vurgu: #1e88e5;}.dugme {    padding: 6px 14px;    background-color: var(--Vurgu);    color: white;    border: 0;    border-radius: 6px;}

#Uygulama: duyarlı şampiyon kartları

Şimdi hepsini bir araya getiriyorsun. Altı şampiyon kartı olan bir sayfa yapacaksın:

• Üstte sayfa adı ve bir menü. Telefonda alt alta, geniş ekranda yan yana; kaydırınca tepede kalır.
• Kartlar ızgarada: telefonda tek sütun, tablette iki, bilgisayarda üç. Bunu tek bir grid satırı yapacak.
• Her kartta büyük harfli bir resim alanı (şampiyon resmi yerine kendi yer tutucumuz), ad, rol ve üç değerlik bir satır. Bazı kartların köşesinde rozet.
• Renkler değişkenlerde; her rolün kendi rengi var.

#Adım 1: HTML

C:\kod\sampiyon-kartlari klasöründe index.html dosyası oluştur. Ders 19'daki semantik etiketleri kullanıyoruz: header, nav, main, article, footer. İlk kartı yaz, sonra kopyalayıp öbür beşini ondan türet; harfi, adı, rolü ve sayıları değiştir. Rozet yalnız Ahri ile Jinx'in kartında var.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Şampiyon Kartları</title>7    <link rel="stylesheet" href="stil.css">8</head>9<body>10    <header class="ust">11        <h1 class="logo">Şampiyon Kartları</h1>12        <nav class="menu">13            <a href="#">Hepsi</a>14            <a href="#">Büyücü</a>15            <a href="#">Savaşçı</a>16            <a href="#">Nişancı</a>17        </nav>18    </header>19 20    <main class="izgara">21        <article class="kart buyucu">22            <span class="rozet">Yeni</span>23            <div class="resim">A</div>24            <h2>Ahri</h2>25            <p class="rol">Büyücü · Orta koridor</p>26            <ul class="degerler">27                <li><b>100</b> can</li>28                <li><b>300</b> altın</li>29                <li><b>1</b> seviye</li>30            </ul>31        </article>32        <article class="kart savasci">33            <div class="resim">G</div>34            <h2>Garen</h2>35            <p class="rol">Savaşçı · Üst koridor</p>36            <ul class="degerler">37                <li><b>620</b> can</li>38                <li><b>500</b> altın</li>39                <li><b>3</b> seviye</li>40            </ul>41        </article>42        <article class="kart nisanci">43            <span class="rozet">Popüler</span>44            <div class="resim">J</div>45            <h2>Jinx</h2>46            <p class="rol">Nişancı · Alt koridor</p>47            <ul class="degerler">48                <li><b>580</b> can</li>49                <li><b>450</b> altın</li>50                <li><b>2</b> seviye</li>51            </ul>52        </article>53        <article class="kart buyucu">54            <div class="resim">L</div>55            <h2>Lux</h2>56            <p class="rol">Büyücü · Destek</p>57            <ul class="degerler">58                <li><b>540</b> can</li>59                <li><b>350</b> altın</li>60                <li><b>2</b> seviye</li>61            </ul>62        </article>63        <article class="kart savasci">64            <div class="resim">Y</div>65            <h2>Yasuo</h2>66            <p class="rol">Savaşçı · Orta koridor</p>67            <ul class="degerler">68                <li><b>590</b> can</li>69                <li><b>400</b> altın</li>70                <li><b>2</b> seviye</li>71            </ul>72        </article>73        <article class="kart nisanci">74            <div class="resim">T</div>75            <h2>Teemo</h2>76            <p class="rol">Nişancı · Üst koridor</p>77            <ul class="degerler">78                <li><b>530</b> can</li>79                <li><b>250</b> altın</li>80                <li><b>1</b> seviye</li>81            </ul>82        </article>83    </main>84 85    <footer class="alt">Ders 21 · CSS yerleşim çalışması</footer>86</body>87</html>

Kartlarda iki sınıf var: kart bütün kartların ortak görünüşü, buyucu / savasci / nisanci ise rol rengi için. Bir öğeye boşlukla ayırarak birden çok sınıf verebilirsin (Ders 20). Resim alanında gerçek bir şampiyon resmi yok; oyun görsellerinin telif hakkı var, yer tutucu olarak adın baş harfini kullanıyoruz.

Menüdeki bağlantıların href="#" değeri şimdilik hiçbir yere götürmez, yalnız sayfanın başını gösterir. Bu menüye Ders 22'de JavaScript ile iş vereceksin: Büyücü'ye basınca yalnız büyücü kartları kalacak.

#Adım 2: değişkenler ve temel kurallar

Aynı klasörde stil.css dosyasını oluştur. Önce temel: kutu hesabı, renk ve boşluk değişkenleri, sayfanın zemini.

1* {2    box-sizing: border-box;3}4 5:root {6    --zemin: #0f1020;7    --kart: #1b1d33;8    --cizgi: #34375a;9    --yazi: #ececf4;10    --soluk: #a3a6c2;11    --bosluk: 16px;12}13 14body {15    margin: 0;16    background-color: var(--zemin);17    color: var(--yazi);18    font-family: "Segoe UI", Arial, sans-serif;19}

Bütün renkler ve boşluk ölçüsü değişkenlerde. Sayfayı açık renklere çevirmek istersen yalnız :root'taki renk değerlerini değiştirmen yeter.

#Adım 3: üst çubuk

21/* Üst çubuk: telefonda alt alta, kaydırınca yukarıda kalır */22.ust {23    position: sticky;24    top: 0;25    z-index: 10;26    display: flex;27    flex-direction: column;28    gap: 10px;29    padding: var(--bosluk);30    background-color: var(--kart);31    border-bottom: 1px solid var(--cizgi);32}33 34.logo {35    margin: 0;36    font-size: 22px;37}38 39.menu {40    display: flex;41    flex-wrap: wrap;42    gap: 8px;43}44 45.menu a {46    padding: 6px 12px;47    border: 1px solid var(--cizgi);48    border-radius: 999px;49    color: var(--yazi);50    text-decoration: none;51}

• .ust yapışkan (sticky, top: 0) ve z-index: 10 ile kartların üstünde kalıyor; kartlar rozet için relative olacağı için bu satır şart.
• Mobil öncelikli: temel kural telefon için, bu yüzden flex-direction: column ile logo üstte, menü altta. Geniş ekran ayarını en sona yazacağız.
• .menu bağlantıları yan yana dizer; dar telefonda sığmazsa flex-wrap: wrap alt satıra geçirir.

#Adım 4: ızgara ve kart

53/* Kart ızgarası: sığdığı kadar sütun */54.izgara {55    display: grid;56    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));57    gap: var(--bosluk);58    max-width: 1100px;59    margin: 0 auto;60    padding: var(--bosluk);61}62 63.kart {64    position: relative;65    padding: 16px;66    background-color: var(--kart);67    border: 1px solid var(--cizgi);68    border-radius: 14px;69    overflow-wrap: break-word;70}71 72/* Rol renkleri: her kart kendi --renk değerini taşır */73.buyucu {74    --renk: #a78bfa;75}76.savasci {77    --renk: #f87171;78}79.nisanci {80    --renk: #fbbf24;81}82 83.rozet {84    position: absolute;85    top: 24px;86    right: 24px;87    padding: 2px 10px;88    background-color: var(--zemin);89    color: var(--renk);90    font-size: 13px;91    font-weight: bold;92    border-radius: 999px;93}

• Izgaranın tamamı tek satır: repeat(auto-fit, minmax(260px, 1fr)). Telefonda 260 piksellik iki sütun sığmaz, tek sütun kalır; bilgisayarda üç sütun açılır. Tek bir @media yazmadık.
• max-width: 1100px ve margin: 0 auto çok geniş ekranda ızgarayı ortada tutar; kartlar sonsuza kadar uzamaz.
• .kart rozet için position: relative; uzun bir ad kartı taşırmasın diye overflow-wrap: break-word. Izgara sütunları en az 260 piksel olduğu için burada min-width: 0 gerekmez.
• --renk değişkenini :root'a değil rol sınıflarına koyduk. Her kart kendi rengini taşıyor; rozet, resim alanı ve rol yazısı var(--renk) ile hangi kartta olduklarına göre renk alıyor.

95.resim {96    display: flex;97    justify-content: center;98    align-items: center;99    height: 120px;100    margin-bottom: 12px;101    background-color: var(--renk);102    color: var(--zemin);103    font-size: 56px;104    font-weight: bold;105    border-radius: 10px;106}107 108.kart h2 {109    margin: 0;110}111 112.rol {113    margin: 4px 0 12px;114    color: var(--renk);115}116 117.degerler {118    display: flex;119    gap: 8px;120    margin: 0;121    padding: 0;122    list-style: none;123}124 125.degerler li {126    flex: 1;127    padding: 8px;128    background-color: var(--zemin);129    border-radius: 8px;130    color: var(--soluk);131    text-align: center;132}133 134.degerler b {135    display: block;136    color: var(--yazi);137    font-size: 18px;138}

• .resim harfi flex ile tam ortalıyor: yükseklik verdik, bu yüzden dikey ortalama çalışıyor.
• .degerler listesi flex; her li flex: 1 ile satırı eşit paylaşıyor. list-style: none ve padding: 0 listenin madde işaretlerini ve iç boşluğunu kaldırıyor.
• b normalde satır içi; display: block ile sayıyı kendi satırına alıp yazının üstüne koyduk.

#Adım 5: alt bilgi ve geniş ekran

140.alt {141    padding: var(--bosluk);142    color: var(--soluk);143    text-align: center;144}145 146/* 700 px ve daha geniş ekranlar */147@media (min-width: 700px) {148    :root {149        --bosluk: 24px;150    }151    .ust {152        flex-direction: row;153        justify-content: space-between;154        align-items: center;155    }156}

Medya sorgusu dosyanın sonunda. 700 piksel ve üstünde iki şey değişiyor: --bosluk kullanan boşluklar (üst çubuğun ve ızgaranın iç boşluğu, kartların arası, alt bilgi) tek bir değişkenle 16 pikselden 24'e çıkıyor ve üst çubuk yan yana diziliyor: logo solda, menü sağda.

#Sonuç: telefonda ve bilgisayarda

Dosyaları kaydet ve index.html'i Live Server ile aç. Sonra DevTools'un telefon görünümünde genişliği 390 ve 1280 yaparak bak. Aşağıdaki görüntüler bu sayfanın başsız Chromium'da çekilmiş gerçek hâlleri:

Sayfa çalıştıysa sıra bozmakta. Her denemeden sonra geri al:

• Ekranı 700 pikselin altına ve üstüne getirip üst çubuğun dizilişinin değiştiği anı yakala. 699 ve 700'ü ayrı ayrı dene.
• z-index: 10 satırını sil, telefon görünümünde sayfayı kaydır: kartlar başlığın üstünden geçer.
• viewport satırını sil; telefon görünümünde listeden bir telefon modeli seçip sayfayı yenile: üç sütunlu, minicik bir sayfa görürsün.
• Ahri'nin adını boşluksuz 40 harf yap: kart taşmamalı, ad satırlara bölünmeli.
• minmax(260px, 1fr) yerine minmax(200px, 1fr) yaz: bilgisayarda kaç sütun oldu?

#Görevler

Görevleri deneme.html'de yap; her görevde <style> ve <body> içini baştan yaz. Her görevde bitmiş sayfanın canlı önizlemesi var: hedefin o, kendi sonucunu onunla karşılaştır. Önce kendin dene, takılırsan ipuçlarını sırayla aç. Her çözümün sonunda bir sınır denemesi var; DevTools'un telefon görünümünde genişliği değiştirerek onu da yap.

.cubuk {    display: flex;    justify-content: center;    align-items: center;    gap: 8px;    height: 100px;    background-color: #263238;    border-radius: 12px;}.tus {    display: flex;    justify-content: center;    align-items: center;    width: 44px;    height: 44px;    background-color: #455a64;    color: white;    font-weight: bold;    border-radius: 8px;}

<div class="cubuk">    <div class="tus">Q</div>    <div class="tus">W</div>    <div class="tus">E</div>    <div class="tus">R</div>    <div class="tus">D</div>    <div class="tus">F</div></div>

.dukkan {    position: relative;    padding: 10px 18px;    background-color: #1e88e5;    color: white;    font-size: 16px;    border: 0;    border-radius: 8px;}.balon {    position: absolute;    top: -8px;    right: -8px;    display: flex;    justify-content: center;    align-items: center;    width: 22px;    height: 22px;    background-color: #e53935;    color: white;    font-size: 12px;    font-weight: bold;    border-radius: 50%;}

<button class="dukkan">Dükkân <span class="balon">3</span></button>

.tablo {    display: grid;    grid-template-columns: 2fr repeat(3, 1fr);    gap: 4px;}.tablo div {    padding: 8px;    background-color: #eceff1;}.tablo .baslik {    background-color: #37474f;    color: white;    font-weight: bold;}

<div class="tablo">    <div class="baslik">Oyuncu</div>    <div class="baslik">Öldürme</div>    <div class="baslik">Ölüm</div>    <div class="baslik">Asist</div>    <div>Deniz</div>    <div>7</div>    <div>2</div>    <div>9</div>    <div>Ece</div>    <div>3</div>    <div>4</div>    <div>12</div>    <div>Mert</div>    <div>10</div>    <div>6</div>    <div>1</div></div>

.ozet {    display: flex;    flex-direction: column;    gap: 16px;}.takim {    padding: 12px;    border-radius: 8px;}.takim h2 {    margin: 0 0 4px;    font-size: 20px;}.takim p {    margin: 0;}.mavi {    background-color: #e3f2fd;}.kirmizi {    background-color: #ffebee;}.ayrinti {    display: none;    margin: 16px 0 0;    padding: 12px;    background-color: #f5f5f5;    border-radius: 8px;}@media (min-width: 500px) {    .ozet {        flex-direction: row;    }    .takim {        flex: 1;    }    .ayrinti {        display: block;    }}

<div class="ozet">    <section class="takim mavi">        <h2>Mavi takım</h2>        <p>Öldürme: 24 · Kule: 7</p>    </section>    <section class="takim kirmizi">        <h2>Kırmızı takım</h2>        <p>Öldürme: 15 · Kule: 3</p>    </section></div><p class="ayrinti">Maç süresi 31 dakika. Maçın oyuncusu: Ahri.</p>

:root {    --zemin: #10131c;    --kart: #1c2130;    --altin: #f2c94c;    --bosluk: 12px;}body {    margin: 0;    background-color: var(--zemin);    color: white;    font-family: "Segoe UI", Arial, sans-serif;}.cubuk {    position: sticky;    top: 0;    z-index: 10;    display: flex;    justify-content: space-between;    align-items: center;    padding: var(--bosluk);    background-color: var(--kart);}.altin {    color: var(--altin);    font-weight: bold;}.esyalar {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));    gap: var(--bosluk);    padding: var(--bosluk);}.esya {    position: relative;    padding: var(--bosluk);    background-color: var(--kart);    border-radius: 10px;    overflow-wrap: break-word;}.esya h3 {    margin: 20px 0 8px;}.esya p {    margin: 0;    color: var(--altin);}.indirim {    position: absolute;    top: 8px;    right: 8px;    padding: 2px 8px;    background-color: var(--altin);    color: var(--zemin);    font-size: 12px;    font-weight: bold;    border-radius: 999px;}.sepet {    position: fixed;    right: var(--bosluk);    bottom: var(--bosluk);    padding: 10px 18px;    background-color: var(--altin);    color: var(--zemin);    font-weight: bold;    border: 0;    border-radius: 999px;}@media (min-width: 700px) {    :root {        --bosluk: 20px;    }}

<header class="cubuk">    <span>Dükkân</span>    <span class="altin">1250 altın</span></header><main class="esyalar">    <div class="esya">        <span class="indirim">İndirim</span>        <h3>Uzun Kılıç</h3>        <p>350 altın</p>    </div>    <div class="esya">        <h3>Büyü Kitabı</h3>        <p>435 altın</p>    </div>    <div class="esya">        <h3>Kalkan</h3>        <p>400 altın</p>    </div>    <div class="esya">        <h3>Can İksiri</h3>        <p>50 altın</p>    </div>    <div class="esya">        <h3>Çizme</h3>        <p>300 altın</p>    </div>    <div class="esya">        <h3>Asa</h3>        <p>875 altın</p>    </div></main><button class="sepet">Sepet</button>