Məzmuna keç
Educora
AZ
AzərbaycancaEnglishРусскийTürkçe
Mənim səhifəmEducora StudioParametrlər
İrəli22 dəq9 / 10

CSS Grid və adaptiv dizayn

CSS Grid ilə sətir və sütunlardan ibarət səhifə maketləri qur, media sorğuları və «əvvəlcə mobil» yanaşması ilə onları istənilən ekrana uyğunlaşdır.

Özünü yoxla
Bu dərsdə öyrənəcəksən
  • grid-template-columns, fr vahidi və repeat() ilə tor yaratmaq
  • Elementləri bir neçə sütuna yaymaq və grid-template-areas ilə səhifə maketi qurmaq
  • Grid ilə Flexbox arasında seçim etmək
  • Media sorğuları və nisbi vahidlərlə «əvvəlcə mobil» adaptiv səhifə yazmaq

Eyni saytı telefonda, planşetdə və geniş monitorda açırsan: kompüterdə məhsullar üç sütunda düzülüb, telefonda isə bir sütunda və heç nə ekrandan kənara çıxmır. Bu, adaptiv dizayndır. Onun əsas alətləri CSS Grid (sətir və sütunlardan ibarət tor) və media sorğularıdır — bu dərsdə hər ikisini öyrənəcəksən.

CSS Grid: sətirlər və sütunlar

display: grid konteyneri tora çevirir. grid-template-columns sütunların sayını və enini verir. Burada xüsusi **fr** vahidi (fraction — pay) işlədilir: 1fr 2fr boş yeri üç paya bölür, birinci sütun bir pay, ikincisi iki pay alır. repeat(3, 1fr) isə 1fr 1fr 1fr-in qısa yazılışıdır. Flexbox-da olduğu kimi, gap xanalar arasında boşluq qoyur.

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>
Önizləmə
repeat(3, 1fr)-i 1fr 2fr 1fr et və orta sütunun iki dəfə genişləndiyinə bax. Elementlər boş xanaları özləri doldurur: 3 və 4 birinci elementin altındakı yerə düşür.

grid-column: span 2 elementi iki sütuna, grid-row: span 2 isə iki sətrə yayır. Səhifənin bütün maketini isə grid-template-areas ilə «şəkil kimi» çəkmək olar: sahələrə ad ver və onları dırnaqlar içində sətir-sətir yerləşdir. Hər element grid-area ilə öz sahəsinə göndərilir.

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>
Önizləmə
Maketi dəyiş: orta sətirdə "side main"-i "main side" et — yan panel sağa keçəcək, HTML isə dəyişməyəcək. Sütunların enini də yerini dəyiş (grid-template-columns: 1fr 140px), yoxsa əsas hissə 140 px-lik dar sütuna düşər. .page > * selektoru .page-in bütün birbaşa uşaqlarını seçir.
MeyarFlexboxGrid
Ölçübir istiqamət: sətir və ya sütuniki istiqamət: sətirlər və sütunlar birlikdə
Nəyə əsaslanırməzmunun ölçüsünəəvvəlcədən çəkilmiş tora
Tipik istifadəmenyu, düymələr sırası, kartın içisəhifə maketi, qalereya, kart toru
Onlar rəqib deyil: çox vaxt səhifənin ümumi maketi Grid, onun hissələrinin içi isə Flexbox ilə qurulur.
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>
Önizləmə
110px-i 200px et — sütunlar azalacaq, xanalar böyüyəcək. aspect-ratio: 1 hər xananı kvadrat edir, xananın içində isə emojini Flexbox mərkəzə gətirir.

Adaptiv dizayn və media sorğuları

Media sorğusu CSS qaydalarını yalnız şərt ödənəndə tətbiq edir, məsələn, pəncərənin eni müəyyən qiymətdən böyük olanda: @media (min-width: 600px) { … }. Adaptiv səhifə yazmağın müasir üsulu əvvəlcə mobil (mobile-first) yanaşmasıdır: əsas üslubları kiçik ekran üçün yazırsan, sonra min-width sorğuları ilə geniş ekranlar üçün əlavələr edirsə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>
Önizləmə
Önizləmənin eni təxminən dərs sütununun eni qədərdir: kompüterdə çox güman ki, iki sütun, telefonda isə bir sütun görəcəksən. 500px-i 1500px et — telefon görünüşü açılacaq.
  • Hər səhifənin <head>-ində <meta name="viewport" content="width=device-width, initial-scale=1"> olmalıdır. Onsuz telefon brauzeri səhifəni təxminən 980px enində geniş ekran üçün çəkir və kiçildir — media sorğuları gözlənildiyi kimi işləmir.
  • Sabit width: 800px əvəzinə max-width: 800px yaz: geniş ekranda blok 800px-dən böyümür, dar ekranda isə sıxılır.
  • Şəkilləri çevik et: img { max-width: 100%; height: auto; } — şəkil heç vaxt konteynerindən kənara çıxmır və nisbətini qoruyur.
  • Şrift ölçüləri üçün rem, sahələr üçün %, fr və vw kimi nisbi vahidlərdən istifadə et. font-size: clamp(1.5rem, 5vw, 3rem) başlığı ekranla birlikdə böyüdür, amma verilən hədlər daxilində saxlayır.
Brauzerin tərtibatçı alətlərini açır (Mac-də Cmd+Option+I)F12
Chrome və Edge-də tərtibatçı alətləri açıq olanda cihaz rejimini yandırır: səhifəni müxtəlif telefon və planşet ölçülərində yoxlamaq olar (Mac-də Cmd+Shift+M)Ctrl+Shift+M

Əsas fikirlər

  • display: grid və grid-template-columns tor yaradır; fr boş yerin payıdır, repeat(3, 1fr) üç bərabər sütundur.
  • span elementi bir neçə xanaya yayır; grid-template-areas bütün maketi adlı sahələrlə çəkir.
  • Flexbox bir istiqamət, Grid iki istiqamət üçündür; onları birlikdə işlətmək normaldır.
  • «Əvvəlcə mobil»: əsas üslublar kiçik ekran üçün, @media (min-width: …) isə geniş ekranlar üçün əlavələrdir.
  • Viewport meta teqi, max-width, çevik şəkillər və nisbi vahidlər adaptiv səhifənin əsasıdır.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10
Eni 300px olan konteynerdə grid-template-columns: 1fr 2fr yazılıb (gap yoxdur). Sütunların eni nə qədərdir?