Articles
CSS'e Giriş
Grid yerleşimi ile ilgili CSS özellikleri

Grid yerleşimi ile ilgili CSS özellikleri

Bu makale, grid yerleşimi ile ilgili CSS özelliklerini açıklar.

Grid ve satır içi (inline grid) nasıl tanımlanır öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-grid.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-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Grid Yerleşimi

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 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    border: 2px solid black;
17}

Grid, öğelerin iki boyutlu satır ve sütunlarda hizalanmasını sağlayan bir yerleşim sistemidir. Grid kullanarak, geleneksel float veya position yöntemleriyle zor olan karmaşık yerleşimleri kolayca ve esnek bir şekilde oluşturabilirsiniz. Flexbox, bir boyutlu yerleşimlerde üstünken, grid iki boyutlu yerleşimler için uygundur.

  • grid-box sınıfı, display özelliğinde grid belirterek bir grid yerleşimi uygular. Bu elemente grid konteyneri (grid-container) denir.
  • grid-template-columns özelliği, grid sütunlarının genişliğini belirtir. Bu örnekte, birinci sütun 100px, ikinci sütun 200px ve üçüncü sütun kalan alanı (auto) kaplar.
  • grid-template-rows özelliği, grid satırlarının yüksekliğini belirtir. Birinci satır 100px, ikinci satır otomatik (auto), ve üçüncü satır 50px yüksekliğinde.
  • gap özelliği, grid öğeleri arasındaki boşluğu ayarlar. Sütunlar ve satırlar arasında 10px boşluk eklemek.

Temel Terimler

  1. Grid konteyneri, display özelliği grid olarak ayarlanmış bir elementtir ve çocukları grid öğeleri haline gelir.
  2. Grid öğeleri, bir grid konteynerinin altında doğrudan yer alan çocuk öğelerdir.

Ana grid özellikleri

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • grid-template-columns ve grid-template-rows özellikleri, her sütun ve satırın boyutlarını tanımlar.
  • px ve % gibi birimlerin yanı sıra, kalan alanın oranını belirtmek için fr (kesir) kullanılabilir.
    • Bu örnekte, üç sütun vardır ve ikinci sütun diğerlerinden iki kat genişliğindedir.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column ve grid-row, ızgara öğesinin hangi sütuna veya satıra yerleştirileceğini belirtir.
    • Bu örnekte, öğe 2. sütundan 4. sütuna ve 1. satırdan 3. satıra kadar uzanır.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows ve grid-auto-columns, ızgara düzeni hatları veya sütunları açıkça tanımlanmadığında otomatik olarak oluşturulan satır ve sütunların boyutunu kontrol eden özelliklerdir.
    • Bu örnekte, 2 satır ve 2 sütun açıkça tanımlanmıştır, ancak daha fazla öğe eklenirse grid-auto-rows ve grid-auto-columns'a göre yeni satır veya sütunlar otomatik olarak oluşturulacaktır.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Izgara öğelerini yatay (justify-items) ve dikey (align-items) olarak hizalayın.
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area, bir ızgara öğesinin ızgara konteynerinde hangi alana yerleştirilmesi gerektiğini belirler.
    • Bu örnekte, 1. satırdan 3. satıra ve 2. sütundan 4. sütuna kadar olan alanın kaplanması anlamına gelir.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap, sütunlar ve satırlar arasına boşluk ekler. Sütunlar ve satırlar arasındaki boşluğu tek tek column-gap ve row-gap kullanarak belirtebilirsiniz.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow, öğelerin satır veya sütun temelinde hangi yönde yerleştirileceğini ayarlayan bir özelliktir.

Karmaşık düzen örneği 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

Bu şekilde, grid, basit bir kodla tüm bir web sayfası düzeni oluşturmanıza olanak sağlar.

  • Bu örnekte, üç sütun (yan kolonu, ana içerik ve reklam) ve üç satır (başlık, içerik ve alt bilgi) bulunmaktadır.
  • Başlık ve altbilgi, sayfanın tam genişliğini kaplar; içerik merkezde, yan panel ve reklam her iki tarafta bulunur.

Izgaraların Avantajları

Izgara kullanmanın avantajları şunlardır:.

  • Kolay iki boyutlu düzen: Satır ve sütunlarda düzeni yönetmek, daha az kodla karmaşık düzenlerin bile oluşturulmasına olanak tanır.
  • Duyarlı tasarımla uyumlu: Izgara sistemi, farklı ekran boyutlarına uyum sağlayan duyarlı tasarımların kolayca oluşturulmasını sağlar.

gap özelliği 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

gap özelliği, ızgara düzenlerinde ve esnek kutu düzenlerinde, öğeler arasındaki boşluğu (aralığı) ayarlamak için kullanılır. Bu özelliği kullanarak, alt öğeler arasında kolayca boşluk oluşturabilirsiniz.

  • gap-grid-container sınıfında, her bir eleman arasında dikey olarak 30px ve yatay olarak 10px boşluk ayarlanmıştır. grid-template-columns ile 3 sütunlu bir grid oluşturulduğundan, her bir eleman arasında dikey ve yatay boşluklar uygulanır. gap-flex-container sınıfında, flexbox içindeki üç öğe arasında 50px boşluk uygulanır.

Temel Sözdizimi 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap, satırlar arasındaki boşluğu belirler. Bu, grid veya flex düzenlerindeki dikey aralıklardır.
  • column-gap, sütunlar arasındaki boşluğu belirler. Bu, yatay aralıktır.

Eğer iki değer belirtilmezse, bir değer hem row-gap hem de column-gap için uygulanır.

gap özelliğinin avantajları

gap özelliğinin faydaları şunlardır:.

  • Basit boşluk ayarı: Alt öğeler arasındaki boşlukları ayarlamak için kod daha basit hale gelir, öğeler arasında ekstra kenar boşluğu veya dolgu ayarlama ihtiyacını ortadan kaldırır.
  • Esnek uyum: Duyarlı tasarımı kolayca destekler ve esnek tasarım ayarlamalarına izin verir.

grid-template-areas özelliği 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

grid-template-areas özelliği, bir grid konteyneri içindeki alanlara isim tanımlamanın ve bu isimleri kullanarak grid elemanlarını kolayca konumlandırmanın bir yolunu sağlar. Bu özelliği kullanarak görsel olarak sezgisel düzen tanımlamaları yapabilirsiniz.

grid-template-areas özelliği ile tanımlanan adlandırılmış alanlara yerleştirilen elemanlar, grid-area özelliği ile aynı adı almalıdır. Elemanlar birden fazla hücreye yayılsa bile, otomatik olarak doğru şekilde konumlandırılırlar.

Bu örnekte, grid şu şekilde oluşturulmuştur:.

  • İlk satırda, "header" iki sütuna yerleştirilmiştir.
  • İkinci satırda, "sidebar" sola ve "content" sağa yerleştirilmiştir.
  • Üçüncü satırda, "footer" iki sütuna yerleştirilmiştir.

Temel Kullanım 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

grid-template-areas özelliğinde, her satır için alanın adı belirtilir. Elemanları atanan isimlerle bölgelere yerleştirerek kolayca düzenler oluşturabilirsiniz. - Bu örnekte, 2 satır ve 3 sütundan oluşan bir grid oluşturulmuş ve her hücre area1, area2, vb. olarak adlandırılmıştır.

Boş hücreleri tanımlamak için .` kullanma 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Yerleşiminizde boş hücrelere sahip olmak istiyorsanız, boş hücreleri bir . (nokta) kullanarak temsil edebilirsiniz. - Bu örnekte olduğu gibi, sidebar ve content arasında bir . belirterek ikinci sütun boş hale gelir.

grid-template-areas özelliğinin avantajları

grid-template-areas özelliğinin avantajları aşağıdaki noktaları içerir.

  • Görsel düzen: Yerleşimi görsel olarak ifade etmenizi sağlar ve tasarımı anlamayı kolaylaştırır.
  • Kolay öğe hareketi: HTML'yi değiştirmeden, CSS'deki alan tanımlarını değiştirerek öğe düzenini kolayca ayarlayabilirsiniz.

Notlar

grid-template-areas özelliğini kullanırken aşağıdaki noktalara dikkat etmek önemlidir.

  • Her satırdaki isim sayısı tanımlanan sütun sayısıyla eşleşmelidir.
  • Aynı ismi birden fazla hücreye atamak bu hücreleri birleştirir, ancak farklı satırlara veya sütunlara atanırken alan kare olmalıdır.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid, CSS'deki display özelliği için bir değerdir. Bu özelliği uygulamak, öğenin satır içi düzeyindeki bir konteyner gibi davranmasını sağlar ve dahili olarak bir ızgara formatlama bağlamı oluşturur. display: grid'den farklı olarak, belge akışında satır içi bir öğe gibi davranır.

inline-grid kullanım durumları

inline-grid, grid kadar yaygın değildir, ancak belirli senaryolarda etkili bir şekilde kullanılabilir.

  • Satır içi bağlamda grid: Metin içeriğinin veya diğer satır içi öğelerin yanında bir ızgara yerleştirmek istediğinizde faydalıdır. Örneğin, düğmeler, rozetler, etiketler vb. için bir ızgara yapısına ihtiyaç duyulduğunda, ancak metin akışını bozmadan satır içi olarak görüntülemek istediğinizde faydalıdır.

  • Satır içi öğelerde düzen kontrolü: Bağlantılar, düğmeler veya span gibi satır içi öğelerde karmaşık düzenler gerektiğinde bile, inline-grid, blok görüntüsünden kaçınırken ızgara düzeniyle iç yapıyı yönetebilir.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

Bu durumda, düğme ikonları ve metni bir ızgara içinde görüntülerken, belge akışında satır içi kalır.

  • Duyarlı satır içi bileşenler: inline-grid, satır içi içeriğin bir parçası olan ve ızgara düzeni gerektiren küçük bileşenler için kullanılabilir. Örneğin, bir ızgara ile düzeni ayarlamak istediğiniz ancak satır içi tutmak istediğiniz satır içi formlar, rozetler, ürün etiketleri vb. için uygundur.

inline-grid hizalama ve boyutlandırma 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Diğer satır içi öğeler gibi, inline-grid, çevresindeki içeriğe göre dikey hizalamaya uyar. Izgaranın hizalamasını vertical-align özelliğini kullanarak kontrol edebilirsiniz.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • inline-grid öğesi, yalnızca grid içeriği tarafından gereken genişliği kaplar. Gerekirse, genişlik, yükseklik ve minimum/maksimum boyutları açıkça belirtebilirsiniz.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Grid düzeni, inline-grid konteynerinin boyutunu da belirleyebilir ve bu eğilim, fr, auto ve yüzdeler gibi esnek birimler kullanıldığında daha güçlüdür.

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

YouTube Video

Flexbox ile ilgili CSS özellikleriSütun Düzeniyle İlgili CSS Özellikleri