Articles
CSS'e Giriş
Flexbox, Grid ve Kolon Düzenlerinin Karşılaştırması

Flexbox, Grid ve Kolon Düzenlerinin Karşılaştırması

Bu makale, Flexbox, Grid ve Kolon Düzenleri arasındaki karşılaştırmayı açıklar.

Flexbox, Grid ve Kolon Düzenleri arasındaki farkları ve her birini ne zaman kullanmanız gerektiğini öğreneceksiniz.

YouTube Video

Önizleme için HTML

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

Flexbox, Grid ve Kolon Düzenlerinin Karşılaştırması

CSS flex, grid ve columns öğeleri hizalamak ve düzenlemek için kullanılan tekniklerdir, ancak her birinin kendine özgü avantajları ve ideal kullanım durumları vardır. Aşağıda, karşılaştırma yoluyla farklılıklarının açık bir açıklaması verilmiştir.

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

Özellikler

  • Tek yönlü düzenler için uygundur—yatay veya dikey.
  • Öğelerin sırası ve esnekliği üzerinde esnek kontrol sağlar.
  • Gezinme çubukları ve düğme grupları gibi küçük ölçekli düzenler için en uygun.

Avantajlar

  • Alt öğelerin boyutunu otomatik olarak ayarlar.
  • Flex-direction, flex-wrap ve order gibi özellikleri kullanarak öğelerin sırasını değiştirebilirsiniz.

Görünüm sırasını değiştirme örneği

Görünüm sırasını değiştirme örneği olarak, flex-direction özelliğini column olarak ayarlayalım.

1.flex-container {
2    flex-direction: column;
3}

Flex-direction özelliği column olarak ayarlandığında, öğeler yatay bir düzenden dikey bir düzene değişir. Düzen, soldan-sağa formundan yukarıdan-aşağıya formuna değişir.

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

Özellikler

  • İki boyutlu düzenler için idealdir.
  • Kılavuz tabanlı düzenlerin açık bir şekilde tanımlanmasını sağlar.
  • Daha karmaşık tasarımlar ve genel sayfa yapısı için harika.

Avantajlar

  • Satırlar ve sütunlar aynı anda tanımlanabilir.
  • Bölümler, adlandırılmış alanlar (grid-area) kullanılarak yerleştirilebilir.
  • Alt öğeler, kılavuz içerisinde serbestçe yerleştirilebilir, bu da sıra üzerinde esnek kontrol sağlar.

Görünüm sırasını değiştirme örneği

Görünüm sırasını değiştirme örneği olarak, grid-template-areas özelliğini kullanarak gösterim pozisyonlarını ayarlayalım.

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

Gördüğünüz gibi, grid sadece görünüm sırasını değiştirmek için değil, aynı zamanda özgün düzenler oluşturmak için de kullanılabilir.

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

Özellikler

  • Kolayca dergi tarzı sütunlar oluşturabilirsiniz.
  • Akışkan metin içeriği için idealdir.
  • HTML kaynak sırasını takip eder, bu da öğe sırasını kontrol etmede daha az uygun hale getirir.

Avantajlar

  • Uzun metni otomatik olarak bölebilir.
  • Çok kolay bir şekilde gazete tarzı düzenler oluşturabilirsiniz.

Karşılaştırma Tablosu

Özellik / Kullanım Durumu Flexbox Grid Sütunlar
Düzen Boyutu 1D (yatay veya dikey) 2D (yatay ve dikey) 1D (dikey)
En Uygun Olduğu Durum Bileşen hizalaması Tüm sayfa yapısı Çok sütunlu metin
Düzen Esnekliği Yüksek (sıra ve boyut) Çok Yüksek (alan tanımı) Düşük (sadece otomatik bölme)
Alt Öğelerin Kontrolü Esnek Net bir şekilde tanımlanmış Kontrolü zor
Düzenin Amacı İçerik odaklı Düzen odaklı Metin odaklı

Özet

  • Flexbox, başlıklar veya kart listeleri gibi öğeleri bir sıraya hizalamak istediğinizde idealdir.
  • Grid, bir web sayfasının yapısı gibi tüm düzeni tasarlamak istediğinizde uygundur.
  • Sütunlar, makaleler veya bloglar gibi metni birden fazla sütuna biçimlendirmek istediğinizde en iyisidir.

Ayrıca ihtiyaca göre birlikte kullanabilirsiniz. Örneğin, genel düzeni Grid ile tasarlayabilir ve iç öğeleri Flex ile hizalayabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Sütun Düzeniyle İlgili CSS Özellikleri