CSS Flexbox ve Grid Sistemi

Flexbox, CSS’deki en şaşırtıcı özelliklerden biridir. Aslında flexbox, esnek kutuların kontrol edilmesini sağlar. Bu kutuları kontrol etmek için, bizim gibi insanların gözünün gördüğü sayfaların düzeni hakkında daha güçlü bir his kazanmamız gerekiyor. Flexbox’un yapısı, bu kutuların boyutunu, sıralamasını ve hizalamasını değiştirerek, tam olarak istediğimiz düzeni sağlamamıza izin verir.

Aşağıdaki kod blokları, Flexbox kullanarak 3 kutuya sahip genişletilebilir bir menü oluşturulmasına ilişkin bir örnek içerir:

<div class="menu">
  <div class="item">Anasayfa</div>
  <div class="item">Hakkımızda</div>
  <div class="item">İletişim</div>
</div>

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  padding: 10px;
  background-color: #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

Yukarıdaki kod bloklarında, HTML’de üç tane kutu (item) oluşturuldu ve CSS’de bu kutular flexbox özelliği sayesinde hizalandı.

Flexbox özelliğinin yanı sıra, CSS’de Grid Sistemi de son zamanlarda çok popüler hale geldi. Bu özellik, sayfa düzenini daha karmaşık hale getirmemizi sağlar. Tek ihtiyacımız olan şey, sayfada bir ızgara yapısı oluşturmaktır. Bu ızgara yapısını kullanarak, farklı sütunlar ve satırlar oluşturabiliriz.

Aşağıdaki kod blokları, Grid Sistemi kullanarak 4 sütunlu bir sayfa düzeni oluşturulmasına ilişkin bir örnek içerir:

<div class="grid-container">
  <div class="item">Kutu 1</div>
  <div class="item">Kutu 2</div>
  <div class="item">Kutu 3</div>
  <div class="item">Kutu 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}

Yukarıdaki kod bloklarında, HTML’de 4 tane kutu (item) oluşturuldu ve CSS’de bu kutuların bulunduğu grid-container sınıfı oluşturuldu. Bu sınıfta, grid özelliği kullanılarak 4 sütunlu bir ızgara oluşturuldu ve grid-gap özelliği kullanılarak sütunlar arasına boşluk eklendi.