CSS Grid Sistemi

Adı : CSS Grid Sistemi

CSS Grid Sistemi, web tasarımında son yıllarda popüler olan bir tekniktir. Bu sistem, bir sayfadaki içerikleri sütun ve satırlar halinde düzenlemek için kullanılır. Çok sayıda farklı boyutta cihaza sahip kullanıcılar için, responsive tasarımların yapılmasında büyük kolaylık sağlayan bir yöntemdir. Ayrıca, CSS Grid Sistemi ile daha hızlı ve daha esnek tasarımlar oluşturabilirsiniz.

CSS Grid Sistemi Nasıl Kullanılır?

CSS Grid Sistemi, bir ana konteyner (container) içerisinde sütunlar (columns) ve satırlar (rows) gibi dinamik web komponentleri kullanarak oluşturulur. Grid’de bunlar bir grid’e yerleştirilir ve daha sonrasında HTML içeriği bu Grid’lere yerleştirilir. HTML’de dört temel Grid öğesi vardır:

1. Container: Grid’in ana ögesidir ve içindeki sütun ve satırları belirler. Container için özel bir class veya id’ye ihtiyacınız yoktur.
2. Item: Container içindeki her bir satır veya sütun Grid Item olarak adlandırılır.
3. Line: Sütun ve satırlar arasındaki Grid çizgisi (Line) olarak adlandırılır.
4. Track: Sütun veya satırların genişliği veya yüksekliği Track olarak adlandırılır.

İlk olarak, Container’da sütunların ve satırların kaçar adet olacağını belirlemelisiniz. Bu adetler, “grid-template-columns” ve “grid-template-rows” öznitelikleri ile belirlenir. Örneğin, üç sütun ve dört satırdan oluşan basit bir Grid’in CSS kodları şöyle olacaktır:

#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}

Burada, “1fr” bir birimdir ve bir fraksiyonu temsil eder. Bu örnekte, üç sütun ve dört satır için, 1fr = 33.33% demektir. Bu nedenle, sütun toplamı 100%’e eşit olacaktır.

Şimdi, Grid Item’leri (satır ve sütunlar) belirlemeliyiz. Bunun için, “grid-row” ve “grid-column” öznitelikleri kullanılır. Bu öznitelikler ile, her Grid Item’in belirli bir sütun ve satır aralığına sahip olacağı belirtilir. Örneğin, 2. sütundan 4. sütuna kadar ve 3. satırdan 4. satıra kadar olan Grid Item’in CSS kodları şöyle olacaktır:

.item {
grid-row: 3 / 4;
grid-column: 2 / 4;
}

Bu, Grid Item’in 3. satırdan başlayarak 4. satıra kadar ve 2. sütundan başlayarak 4. sütuna kadar genişletilmesini sağlar.

CSS Grid Sistemi’ne Örnekler

1. Basit bir Grid

Basit bir CSS Grid Sistemi için aşağıdaki kod örnekleri kullanılabilir:

// HTML

// CSS
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}

.item {
background: #dbdce7;
padding: 20px;
font-size: 24px;
text-align: center;
}

Burada, Container üç sütuna ve iki satıra sahiptir. Item’ler dört tane dikey ve iki tane yatay Grid çizgisine yerleştirilir. Bu, Grid’i dört satır ve iki sütuna ayırır.

2. Responsive Grid

Bu CSS Grid Sistemi örneği, Responsive tasarımlar için uygundur. Aşağıdaki kodlar, başlangıçta bir Grid hizalaması sağlayacak ve ardından ekrana göre Grid Item’leri değiştirir:

// HTML


// CSS
#container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}

.item {
background: #dbdce7;
padding: 20px;
font-size: 24px;
text-align: center;
}

Bu Grid, 200 piksel genişliği aşmayacak ve bir satırda iki veya daha fazla Item’e sığacak şekilde tasarlanmıştır. Eğer ekranda daha fazla Item varsa, Grid’in otomatik olarak satırları düzenlemesi sağlanacaktır.

3. Karmaşık Grid

CSS Grid Sistemi, karmaşık tasarımlar için de kullanılabilir. Aşağıdaki örnek kodlar, Grid’de sütunlar ve satırlar arasındaki çizgilerin uygulanmasını sağlar.

// HTML


// CSS
#container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 10px;
}

.header {
grid-column: 1 / 4;
background: #dbdce7;
padding: 20px;
font-size: 24px;
text-align: center;
}

.menu {
grid-column: 1 / 2;
grid-row: 2 / 4;
background: #e4e4e4;
padding: 20px;
font-size: 18px;
text-align: center;
}

.content {
grid-column: 2 / 3;
grid-row: 2 / 3;
background: #f5f5f5;
padding: 20px;
font-size: 18px;
text-align: center;
}

.sidebar {
grid-column: 3 / 4;
grid-row: 2 / 3;
background: #e4e4e4;
padding: 20px;
font-size: 18px;
text-align: center;
}

.footer {
grid-column: 1 / 4;
grid-row: 4 / 5;
background: #dbdce7;
padding: 20px;
font-size: 18px;
text-align: center;
}

Sık Sorulan Sorular

1. CSS Grid Sistemi nedir?

CSS Grid Sistemi, web tasarımında içerikleri sütun ve satırlar halinde düzenleyen bir tekniktir. CSS kodları ile Grid’in çizgileri belirlenir ve HTML içeriği bu Grid’lere yerleştirilir.

2. CSS Gridleri nasıl oluşturulur?

Grid’ler üç adımda oluşturulur:

- Container’ın belirlenmesi
- Grid Item’lerinin belirlenmesi
- Grid çizgilerinin belirlenmesi

3. CSS Grid Sistemi Responsive tasarımlar için kullanılabilir mi?

Evet, CSS Grid Sistemi Responsive tasarımlar için kullanılabilir. Grid, otomatik olarak satır düzenlemesi yapar ve buna göre içerikleri yerleştirir.

4. CSS Grid Sistemi hangi web tarayıcılarında desteklenir?

CSS Grid Sistemi, son dönem web tarayıcılarında desteklenmektedir. Bu tarayıcılar şunları içerir:

- Google Chrome
- Mozilla Firefox
- Apple Safari
- Microsoft Edge
- Opera

Sonuç olarak, CSS Grid Sistemi web tasarımında önemli bir yere sahiptir. Bu sistem, Responsive tasarımların hızlı bir şekilde oluşturulmasına yardımcı olurken daha esnek ve kolay bir kullanım sağlar. Çok sayıda cihaza uyumlu tasarımlar yapmak isteyen web tasarımcıları için, CSS Grid Sistemi bir zorunluluktur."