CSS Grid Kullanımı Başlangıç Rehberi

CSS Dersleri, CSS Kod Örnekleri, Eğitim, Kod Örnekleri, Yazılım Dersleri

Web geliştirme sürecinde, modern kullanıcı arayüzleri oluşturmak için güçlü bir araç olan CSS Grid, geliştiricilerin karmaşık düzenleri kolayca oluşturmasını sağlar. CSS Grid Layout, iki boyutlu bir sistem sunarak hem satır hem de sütun bazında düzenlemeler yapmanıza olanak tanır. Bu rehberde, CSS Grid'in temel kullanımını adım adım açıklayacak ve modern örneklerle uygulamalı anlatımlar sunacağız.

CSS Grid Nedir?

CSS Grid, web sayfalarında düzen oluşturmak için kullanılan bir CSS modülüdür. Geleneksel float ve flexbox yöntemlerinin aksine, iki boyutlu bir yapı sunar. Bu özellik sayesinde, hem yatay hem de dikey hizalamaları kolayca yönetebilirsiniz. CSS Grid, özellikle karmaşık tasarımlar için zaman kazandırır ve kodları daha düzenli hale getirir.

CSS Grid'in Temel Yapısı

CSS Grid kullanımı, bir HTML öğesine display: grid; özelliği atanarak başlar. Grid sistemi, satırlar (rows) ve sütunlar (columns) üzerine kurulur.

Örnek Temel Yapı:

1

2

3

4

5

</div>

1

2

3

4

5

6

7

8

9

10

11

.grid-container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px;

gap: 10px;

}

.item {

background-color: lightblue;

text-align: center;

}

Yukarıdaki örnekte, bir grid konteyneri tanımlanmış ve içine üç sütunlu bir düzen eklenmiştir. grid-template-columns ve grid-template-rows özellikleri, satır ve sütunların genişliklerini belirler.

Grid İçin Önemli Kavramlar

Grid Container: Grid düzeninin uygulanacağı kapsayıcıdır.
Grid Item: Grid container içinde yer alan bireysel öğelerdir.
Grid Template Areas: Düzeni tanımlamak için isimlendirilmiş alanlardır.
Implicit ve Explicit Grid: Grid yapısını manuel olarak belirlemek veya tarayıcının varsayılan düzenini kullanmasıdır.

CSS Grid Kullanımında Geçişler

Modern Örnek:
Bir blog düzeni oluşturmak için CSS Grid'i kullanabilirsiniz.

1

2

3

4

5

6

7

<header>Header</header>

<nav>Navigation</nav>

<main>Main Content</main>

<aside>Sidebar</aside>

<footer>Footer</footer>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

.grid-container {

display: grid;

grid-template-areas:

"header header"

"nav main"

"nav sidebar"

"footer footer";

grid-template-columns: 1fr 3fr;

grid-template-rows: auto;

gap: 15px;

}

header {

grid-area: header;

background: lightgray;

}

nav {

grid-area: nav;

background: lightcoral;

}

main {

grid-area: main;

background: lightgreen;

}

aside {

grid-area: sidebar;

background: lightblue;

}

footer {

grid-area: footer;

background: lightgoldenrodyellow;

}

Bu düzen ile, header, navigation, ana içerik, yan bar ve footer öğelerini grid sisteminde kolayca konumlandırabilirsiniz.

Neden CSS Grid Kullanılmalı?

Karmaşık Düzenler İçin İdeal: Özellikle, galeri veya pano gibi düzenler için harikadır.
Kodun Okunabilirliği: CSS Grid, daha az kod ile daha düzenli yapılar sunar.
Modern Tarayıcı Desteği: Günümüz tarayıcılarının çoğu CSS Grid'i tamamen destekler.

Örnek: Responsive Grid Tasarımı

Grid sistemini mobil uyumlu hale getirmek için medya sorguları kullanabilirsiniz.

1

2

3

4

5

6

7

8

9

10

11

@media (max-width: 768px) {

.grid-container {

grid-template-columns: 1fr;

grid-template-areas:

"header"

"nav"

"main"

"sidebar"

"footer";

}

Bu kod, ekran genişliği küçüldüğünde grid yapısını tek sütunlu hale getirir.

CSS Grid, modern web tasarımında esnek ve güçlü bir araçtır. Karmaşık düzenleri kolayca oluşturmak, düzenlemek ve mobil uyumlu hale getirmek için idealdir. CSS Grid'i öğrenmek, web geliştirme sürecinde sizi bir adım öne taşır.

CSS Grid, CSS Grid Kullanımı, CSS Grid Layout, CSS Grid Responsive, CSS Grid Template Areas, CSS İki Boyutlu Düzen, Grid Container, Grid Item, Modern Web Tasarımı, Responsive Grid

1 Ocak 2025

Diğer Yazılarımız

Tüm Yazılarımız

Sunucularda; Günlük Yedekleme vs. Sürekli Yedekleme

Veri güvenliği, günümüzün dijital dünyasında işletmelerin en büyük önceliklerinden biridir.…

Python’un Veri Biliminde Öne Çıkma Nedenleri

Python, son yıllarda veri bilimi alanında en çok tercih edilen…

Çevrimiçi Pazarlamada Yol Haritası

Bir ülkeye tatile çıkmayı planladığınızı düşünün. Elinizde bir harita ya…

HTML: HTML Nedir?

Hyper Text Markup Language Türkçe karşılığı “Hiper metin/yazı İşaretleme Dili”…

Soru işareti kalmasın

Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?

İletişime geç

Hizmetlerimiz

Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.

Hizmetlerimiz

Tüm Yenilik ve Kampanyalardan Haberdar Ol

Önceki Yazımız

Tüm Yazılarımız

Sonraki Yazımız

No Comments

CSS Grid Kullanımı Başlangıç Rehberi

CSS Grid Nedir?

CSS Grid'in Temel Yapısı

Grid İçin Önemli Kavramlar

CSS Grid Kullanımında Geçişler

Neden CSS Grid Kullanılmalı?

Örnek: Responsive Grid Tasarımı

Diğer Yazılarımız

Sunucularda; Günlük Yedekleme vs. Sürekli Yedekleme

Python’un Veri Biliminde Öne Çıkma Nedenleri

Çevrimiçi Pazarlamada Yol Haritası

HTML: HTML Nedir?

Soru işareti kalmasın

Hizmetlerimiz

Tüm Yenilik ve Kampanyalardan Haberdar Ol

Son Yazılar

Yazı hakkında ne Düşünüyorsunuz? cancel