CSS3 grid Izgara Sistemi

CSS3 ile birlikte gelen grid düzen modülü veya ızgara sistemi olarak adlandırılan yapının kullanımı ile ilgili bilgiler yer alıyor.

CSS grid düzen modülü tablo, float, konumlandırma veya flex gibi özellikleri kullanmadan kolay bir şekilde ızgara sistemi oluşturmayı sağlar.

Tarayıcı Desteği

Tablodaki değerler grid özelliğini destekleyen ilk tarayıcı sürümlerini belirtir.

Izgara sistemi nedir?

Izgara veya kılavuz sistemi web sayfasındaki elemanları satır ve sütun olarak konumlandırmak için kullanılan bir yapıdır.

Izgara sistemi yapısı sırasıyla tablo, css position, css float ve css flex gibi özelliklerle oluşturulabiliyordu.

Bu özelliklerle kullanımında fazla kod yazımı, çeşitli hesaplamaların yapımı ve sayfa elemanlarının kayması gibi çeşitli istenmeyen durumlar meydana geliyordu.

Bu sebeplerden dolayı kolay bir ızgara sistemi oluşturmak için CSS3 ile birlikte grid özelliği gelmiştir.

CSS3 grid nedir?

CSS3 grid taşıyıcı ve elemanlardan oluşan bir ızgara sistemidir.

Taşıyıcı oluşturmak

Izgara özelliğini kullanmak için öncelikle elemanları taşıyan bir taşıyıcı tanımlanması gerekir.

Taşıyıcı display özelliğine grid veya inline-grid değeri verilerek tanımlanır.

Tanımlanan grid değeri taşıyıcı içindeki elemanları satır ve sütun şeklinde konumlandırmayı sağlar.

Böylece alt elemanlar taşıyıcı içerisinde kolay bir şekilde konumlanabilir hale gelir.

Tüm örneklerde kullanılan HTML elemanları;

<div class="kapsayici">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

İlk örnek;

.kapsayici {
  display: grid;
}

.kapsayici > div {
  background-color: lightblue;
  text-align: center;
  padding: 30px;
}

.kapsayici > div:nth-child(even) {
  background-color: lightcyan;
}

Varsayılan olarak elemanlar kapsayıcı içinde bir sütun boyunca konumlanır.

Izgara düzeni oluşturma

Izgara sistemindeki en önemli kısım uygun ızgara düzeninin oluşturulmasıdır.

Izgara düzeni sütun, satır ve özel olmak üzere 3 farklı yol ile belirlenir.

Sütun düzeni belirleme

Izgara sistemindeki sütun düzeni grid-template-columns özelliği ile belirlenir.

Özelliğin geniş bir kullanımı vardır.

Aşağıdaki örnek ızgara sistemini ekran boyutuna göre 3 eşit sütuna böler.

.kapsayici {
  display: grid;
  grid-template-columns: auto auto auto;
}

NOT: Kapsayıcı içindeki her 3ncü elemandan sonra yeni bir satır başlayacaktır.

Aşağıdaki örnekte ilk ve üçüncü sütun 400px genişliğine ikinci sütun ise ekran genişliğine göre otomatik genişliğe sahiptir.

.kapsayici {
  display: grid;
  grid-template-columns: 400px auto 400px;
}

Aşağıdaki örnekte sütunlar ekran boyutuna göre genişliğe sahip olacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: 30% 50% 20%;
}

Aşağıdaki örnekte ikinci sütun genişliği satırın 4’te 2 sine diğerleri ise 4’te 1 ine sahiptir.

.kapsayici {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Aşağıdaki örnek satırı 12 eşit sütuna bölecektir.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

Satır sayısının belirlenmesi için öncelikle sütun sayısının belirlenmesi gerekir.

Satır düzeni belirleme

Satır düzeni belirlemek pek kullanılan bir yöntem değildir.

Satır sayısı belirleme işlemi yerine genellikle satır yüksekliği belirleme kullanılır.

Aşağıdaki örnek her satır yüksekliğini 100px olarak belirler.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

Aşağıdaki örnek satır içeriğine göre değişken veya en az satır yüksekliği 100px olarak belirler.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

Satır ile ilgili işlem yaparken kapsayıcıya yükseklik vermek işlem sonucunu görmek için faydalı olacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 700px;
  grid-template-rows: 15% 40% 20% 10%;
}

Satır düzeni belirleme işleminde sütun düzeni belirlemede kullanılan değerlerde kullanılır.

Boşluk belirleme

Izgara sisteminde elemanlar arası boşluk bırakmak için grid-column-gap, grid-row-gap ve ikisinin birleşimi grid-gap özelliği kullanılır.

Aşağıdaki örnek elemanlar arasındaki satır boşluğu 20px sütun boşluğu 50px olarak belirler.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 50px;
  /*grid-gap: 20px 50px;*/
}

Özelliğin margin özelliğinden farkı sadece elemanlar arası boşluk bırakmasıdır.

Sütun konumlandırma

Izgara sisteminde elemanları sütun konumlandırma için grid-column-start, grid-column-end ve ikisinin birleşimi grid-column özelliği kullanılır.

Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 1 ve 3 sütun arası yere konumlanacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3;
}

Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 2 ve 4 sütun arası yere konumlanacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-column-start: 2;
  grid-column-end: 4;
  grid-column: 2 / 4;
}

Izgara sistemindeki ilk yer için herhangi bir eleman konumlandırması yapılmadığından boş kalacaktır.

Satır konumlandırma

Izgara sisteminde elemanları satır konumlandırma için grid-row-start, grid-row-end ve ikisinin birleşimi grid-row özelliği kullanılır.

Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 1 ve 3 satır arası yere konumlanacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-row-start: 1;
  grid-row-end: 3;
  grid-row: 1 / 3;
}

Aşağıdaki örnekte kapsayıcı içindeki ilk eleman 2 ve 4 satır arası yere konumlanacaktır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-row-start: 2;
  grid-row-end: 4;
  grid-row: 2 / 4;
}

Konumlandırma işleminde ayrıca span değeride kullanılır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-row-start: 2;
  grid-row-end: span 2;
  grid-row: 2 / span 2;
}

Değer başlangıç değerinin üzerine ekleme yaparak işlem yapar.

Satır ve sütun konumlandırma sıklıkla birlikte kullanılır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-column: 2 / 3;
  grid-row: 1 / 7;
}

Satır ve sütun konumlandırma işleminde grid-area özelliği de kullanılır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kapsayici > div:nth-child(1){
  grid-column: 2 / 3;
  grid-row: 1 / 7;
  grid-area: 1 / 2 / 7 / 3;
}

Yatay hizalama

Izgara sistemindeki elemanları yatay olarak hizalamak için justify-content özelliği kullanılır.

Aldığı değerler;

• start: Elemanlar kapsayıcının başından başlayarak hizalanır. (Varsayılan)
• end: Elemanlar kapsayıcının sonundan başlayarak hizalanır.
• center: Elemanlar kapsayıcının ortasından başlayarak hizalanır.
• space-between: Elemanlardan ilk kutu kapsayıcının başında, son kutu kapsayıcının sonunda olacak şekilde eşit olarak hizalanır.
• space-around: Elemanlar arası boşluk eşit olacak şekilde hizalanır. Boşluklar dikkate alınmaz.
• space-evenly: Elemanlar arası boşluk eşit olacak şekilde hizalanır. Boşluklar dikkate alınır.

Aşağıdaki örnekte space-evenly değeri kullanılmıştır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: space-evenly;
}

Dikey hizalama

Izgara sistemindeki elemanları dikey olarak hizalamak için align-content özelliği kullanılır.

Aldığı değerler;

• start: Elemanlar kapsayıcının başından başlayarak hizalanır. (Varsayılan)
• end: Elemanlar kapsayıcının altından başlayarak hizalanır.
• center: Elemanlar kapsayıcının ortasından başlayarak hizalanır.
• space-between: Elemanlardan ilk kutu kapsayıcının başında, son kutu kapsayıcının sonunda olacak şekilde eşit olarak hizalanır.
• space-around: Elemanlar arası boşluk eşit olacak şekilde hizalanır. Boşluklar dikkate alınmaz.
• space-evenly: Elemanlar arası boşluk eşit olacak şekilde hizalanır. Boşluklar dikkate alınır.

Aşağıdaki örnekte end değeri kullanılmıştır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 500px;
  align-content: end;
}

NOT: Dikey hizalama da kapsayıcı boyutu elamanların toplam boyutundan büyük olması gerekir.

Eleman hizalama

Izgara sistemindeki elemanları yatay ve dikey hizalamak için justify-self ve align-self veya place-self özellikleri kullanılır.

Aldığı değerler;

• start: Eleman hücre başından başlayarak hizalanır.
• end: Eleman hücre altından başlayarak hizalanır.
• center: Eleman hücre ortasından başlayarak hizalanır.
• stretch: Eleman yüksekliği hücrenin yüksekliği kadar olur. (Varsayılan)

Aşağıda eleman hizalama ile ilgili çeşitli kullanımlar yer almaktadır.

.kapsayici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

.kapsayici > div:nth-child(1) {
  justify-self: start;
  align-self: end;
  place-self: end start;
}

.kapsayici > div:nth-child(2) {
  justify-self: center;
  align-self: center;
  place-self: center center;
}

.kapsayici > div:nth-child(3) {
  justify-self: start;
  align-self: start;
  place-self: start start;
}

Özel ızgara düzeni

Izgara sistemindeki son ve en kolay ızgara düzeni belirleme yöntemi özel ızgara düzeni veya adlandırılmış ızgara düzenidir.

Özel ızgara düzeni grid-template-areas özelliği ile belirlenir.

Aşağıdaki örnek ızgara düzenindeki ilk 4 elemanı ust olarak adlandırır.

.kapsayici {
  display: grid;
  grid-template-areas: 'ust ust ust ust';
}

Adlandırılan bölüme eleman grid-area özelliği ile yerleştirilir.

.kapsayici {
  display: grid;
  grid-template-areas: 'ust ust ust ust';
}

.kapsayici > div:nth-child(8) {
  grid-area: ust;
}

Aşağıdaki örnek ızgara düzenini 4 eşit parçaya böler ve ilk 2 elemanı ust olarak adlandırır.

.kapsayici {
  display: grid;
  grid-template-areas: 'ust ust . .';
}

.kapsayici > div:nth-child(8) {
  grid-area: ust;
}

Adlandırılmış ızgara düzeni için yeni bir satır tanımlamak için grid-template-areas özelliğine yeni değerler eklenir.

.kapsayici {
  display: grid;
  grid-template-areas: 
    'ust ust . .'
    'ust ust . .';
}

.kapsayici > div:nth-child(8) {
  grid-area: ust;
}

Adlandırılmış ızgara düzeni ile eleman konumlandırma işlemi için sadece grid-template-areas değerinin değiştirilmesi yeterli olacaktır.

Adlandırılmış ızgara düzeni örneği

Sayfa yapısı;

<main>
  <header>Üst kısım</header>
  <nav>Navigasyon</nav>
  <aside>Yan kısım</aside>
  <section>İçerik</section>
  <footer>Alt kısım</footer>
</main>

İlk olarak isteğimize göre sayfa düzenini grid-template-areas ile belirleyelim.

main {
  display: grid;
  max-width: 960px;
  margin: 0 auto;
  grid-template-rows: repeat(4, minmax(70px, auto));
  grid-gap: 10px;
  grid-template-areas: 
    'ust ust ust ust'
    'anamenu anamenu anamenu anamenu'
    'yanmenu yanmenu icerik icerik'
    '. . icerik icerik'
    'alt alt alt alt';
}

main > * {
  background-color: lightblue;
  padding: 30px;
}

Sayfa düzenini belirledikten sonra sayfa elemanlarını ızgara düzenine yerleştirelim.

header {
  grid-area: ust;
}

nav {
  grid-area: anamenu;
}

aside {
  grid-area: yanmenu;
}

section {
  grid-area: icerik;
}

footer {
  grid-area: alt;
}

Sayfa yapısındaki elemanların yerlerini değiştirelim.

<main>
  <section>İçerik</section>
  <nav>Navigasyon</nav>
  <footer>Alt kısım</footer>
  <aside>Yan kısım</aside>
  <header>Üst kısım</header>
</main>

NOT: Elemanların yerleri değiştirildiği halde sayfa düzeni aynı kalacaktır.

Sayfa düzenini değiştirmek için sadece grid-template-areas özelliğinin değiştirilmesi yeterli olacaktır.

@media only screen and (max-width: 768px) {
  main{
    grid-template-areas: 
        'ust'
        'icerik'
        'anamenu'
        'yanmenu'
        'alt';
  }
}

Izgara sistemi az kod çok işlev ve sağladığı kolaylıktan dolayı kullanımı faydalı olacaktır.

Hayırlı günler dilerim.