CSS Gridli Moda Esnek Düzenler

Sep 13, 2025
Nasıl Yapılır
A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid, iki eksenli satır ve sütun düzenleri oluşturmak için mükemmeldir. Sözdizimi basittir ve sayfa düzenini bir esinti yapar. Çoklu iç içe geçmiş kapları gerektirecek düzenler artık sadece CSS'de açıklanabilir.

Izgara diğer yerleşim özelliklerine göre farklı çalışır, çünkü 'ızgara' değerini 'ekran' özelliğine uygulamak, doğrudan çocukları etkileyecektir. Bu elemanlar şimdi ızgara eşyalarıdır ve ebeveyn üzerinde belirlediğiniz kurallara göre konumlandırılır (özel olarak yerleştirilmedikçe).

Izgara ile tutun

Izgara çok sayıda yeni özellik getiriyor:

  • Izgara boşluğu

Kenar boşluklarını kullanmak yerine, ızgara, ızgaranın düzeninin herhangi bir boşluktan tanımlanmasını ve etkilenmesini sağlayan, ızgara öğeleri arasındaki boşlukları tanımlamak için kendi özelliğine sahiptir. Izgara sistemleri (Inuit ve Twitter Bootstrap'ta bulunanlar gibi), her şeyi doğru şekilde hizalamak için genellikle negatif marjları ayarlamaya güveniyor.

  • FR birimi

Kesir için kısa, bu yeni ölçüm birimi, düzeni bir boşlukla veya boşluksuz olan fraksiyonlara ayırmak için kullanılır.

  • Izgara yerleştirme

CSS ızgarası, herhangi bir elemanın, diğer tüm öğelerden önce, daha sonra otomatik olarak konumlandırılmış olan tüm öğelerin herhangi bir yerinde önceliklendirilmesini ve konumlandırılmasını sağlar.

  • Izgara alanları ve şablonları

Izgara üzerindeki adlandırılmış alanlar tanımlanır ve bu daha sonra neredeyse ASCII modasında düzenini tanımlamaya başvurulur.

  • en az en çok()

'Minmax ()' özellik değeri, ızgara öğeleri, sütunlar ve satırlar için minimum ve maksimum boyut uygulamanıza olanak sağlar. Bu özellik, FlexBox'tan ve CSS'deki diğer her düzey düzen modülünden ne yazık ki eksiktir.

Izgaralarını oluştur

CSS Grid'in güçlü alanları ve şablonları, karmaşık düzenlerin kolayca ulaşılmasını sağlar. 'Izgara alan' özelliğini kullanarak ızgaranızdaki elemanlara bir isim uygulayarak başlarsınız - örneğin 'başlık {GRID-ALAN: başlık; } '. Izgaranızdaki tüm alanları adlandırdığınızda, düzenini tanımlamak için 'ızgara şablon alanlarının' özelliğini kullanabilirsiniz. 

 ızgara şablonları:
  "Header Header Başlığı"
  "Sol Kenar Çubuğu Makalesi Sağ Kenar Çubuğu"
  "Altbilgi altbilgisi altbilgisi"
;

Yukarıdaki kod örneği, üçte bir üç ızgarayı açıklar, birden fazla sütun veya satır açmasını istiyorsanız, basitçe ızgara öğesinin adını tekrarlarsınız. Farklı boyutlu ekranlar için ızgara düzenini değiştirmek için medya sorgularını da kullanabilirsiniz.

Daha sonra, genişliğin farklı sütunlar arasında nasıl bölündüğünü tanımlamak için yeni 'FR' birimini kullanabilirsiniz: 

 ızgara şablonu sütunları: 1FR 3FR 1FR;

Yukarıda gösterilen örnek, mevcut genişliği beş eşit genişlikte bir değere bölecektir; Başka bir deyişle, birinci sütunun beşte birini, ikinci sütun için üçte biri ve son beşinci son sütunun beşte birini uygulayacaktır.

Satırları boyutlandırmak için, üst ve alt sütunları içeriğine boyutlandırmak için yeni 'minmax' özellik değerini kullanabilir ve ardından orta satırın kalan boşluğu ızgarada açmasına izin verebilirsiniz. 

 ızgara şablonu satırları:
  Minmax (Min-Content, Max-Content)
  Oto
minmax (min-içerik, maksimum içerik);

Bu makale aslen Yaratıcı Web Tasarım Dergisi Web Tasarımcısı'nın 271 sayısında yayınlandı. Satın almak Sayı 271 veya Web Tasarımcısına Abone Ol .

CSS ızgarası becerilerinizi güçlendirmek ister misiniz?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Brenda Mağazası, 25 - 27 Nisan 2018 tarihleri ​​arasında New York'taki Real World'de CSS Gridini kullanarak konuşmasını sağlıyor.

Bir yazılım geliştirme ajansında bir tasarımcı ve ön uç geliştirici olarak Brenda Mağazası, Mart 2017'de tarayıcılara ilk sürümünden bu yana web siteleri için üretimde CSS Grid kullanıyor ve büyük bir fan.

Konuştuğunda 25-27 Nisan 2018 tarihleri ​​arasında New York oluşturun , Brenda, sitenizi CSS Grid ile kademeli olarak geliştirebileceğinizi ve daha eski tarayıcılar için kurşun geçirmez bir geri dönüş yazdığını (hatta mevcut kılavuz çerçevenizi bir geri dönüş olarak kullanmaya devam edin), Hepsi Saf CSS: Hepsi Gerekenler: .

New York'u 25-27 Nisan 2018 tarihleri arasında gerçekleşir. Şimdi biletini al .

İlgili Makaleler:

  • CSS ızgara düzeni sırları ortaya çıktı
  • CSS ızgarası ile duyarlı bir düzen oluşturun
  • CSS Grid ile hızlanmak

Nasıl Yapılır - En Popüler Makaleler

Nasıl bir komik sayfa oluşturulur

Nasıl Yapılır Sep 13, 2025

Bu eğitim, herhangi bir komik sayfa oluşturmayı size gösterecektir. Kullanmamıza rağmen Klibi stüdyo boya B..

Portre boyama yağları ile mücadele

Nasıl Yapılır Sep 13, 2025

Bu atölye, anlamı olan bir portre yağlı boya oluşturma ile ilgilidir. Aynı zamanda, sanattaki akademik ilkelerin ve güzell..

kalem çizimlerine dijital renkler ekleyin

Nasıl Yapılır Sep 13, 2025

Tam boyutunu görmek için resme tıklayın Ben geleneksel medyanın büyük bir hayran�..

Animasyonlu bir yazma etkisi nasıl oluşturulur

Nasıl Yapılır Sep 13, 2025

İyi kullanıldığında, CSS animasyonu Sitenize ilgi ve kişilik ekleyebilir. Bu yazıda, tipografınızın kademeli olarak görünmesini sağlayacak..

Kendi karakterinizi nasıl yapılır?

Nasıl Yapılır Sep 13, 2025

Profesyonel olarak çalışan herkes için karakter tasarımı , bir karakter İncil, iş akışınızın en önem..

Efsanevi yaratıklar nasıl geliştirilir

Nasıl Yapılır Sep 13, 2025

Bir yazılım karışımını kullanarak gerçekçi yaratık tasarımları oluşturmak isteyenler - Zbrush, muhteşem tasa..

Animasyonlu bir kahraman nasıl tasarlanır

Nasıl Yapılır Sep 13, 2025

Aşağıdaki ipuçları, Eric Miller Animation Studios'un yaklaşmakta olan web serisi için Bink'yı canlandırma için sürecimi bozuyor. Bink, yakalanan ve bir test laboratuvarı için al�..

Pixate'de bir yüzer eylem düğmesi prototipi

Nasıl Yapılır Sep 13, 2025

PIXATE, Android ve iOS cihazlarında önizlenebilecek etkileşimli mobil mockupları hızlı bir şekilde prototip yapmanızı sağlar. Bu eğitimde, alt seçenekler de dahil olmak üzere bir..

Kategoriler