Studio Editor: Gelişmiş CSS Izgarasıyla Çalışma

6 dakikalık okuma
Ögelerin ve bölümlerin düzenini düzenlemek için gelişmiş bir CSS Izgara'yı Studio Editor'de kullanabilirsiniz. İstediğiniz satır ve sütun sayısını seçebilir ve duyarlı ölçüleri kullanarak bunların boyutlarını ayarlayabilirsiniz (ör. fr, Min/maks, %). 
Ek Wix Studio web seminerlerine, eğitimlerine ve kurslarına göz atmak için Wix Studio Akademisi'ne gidin.
Bu makalede, CSS ızgarayla çalışma hakkında öğrenecekleriniz:

Bölüm ızgarasından CSS ızgaraya geçiş yapma

Editördeki bölümler, bir bölüm ızgarası ayarlama seçeneğiyle birlikte gelir. Bu, CSS mantığıyla çalışan gelişmiş ızgaranın, kolay kullanılan bir sürümüdür. Gelişmiş bir CSS ızgaraya geçmek, size kesme noktası başına düzen üzerinde daha hassas kontrol sağlar.
Not:
Geçiş yaptıktan sonra bölüm ızgarasına geri dönmeniz mümkün değildir. Eylemi yeni gerçekleştirdiyseniz, editörün sağ üst kısmındaki Geri Al düğmesini  kullanabilirsiniz.

Bölüm ızgarasından CSS ızgaraya geçmek için:

  1. Editörde ilgili bölümü seçin.
  2. Editörün sağ üstündeki Denetçiyi Aç okuna  tıklayın.
  3. Sayfayı aşağı kaydırarak Düzen'e gidin.
  4. Gelişmiş CSS Izgara'nın yanındaki Geçiş Yap düğmesine tıklayın.
  5. CSS Izgaraya Geç'e tıklayın.
Denetçi panelindeki gelişmiş ızgaraya geçiş seçeneğini gösteren bir ekran görüntüsü
Sırada ne var?
Denetçi panelinden satırları, sütunları ve aralıkları özelleştirin. Izgara çizgilerini tuvalde taşımak için de sürükleyebilirsiniz.  

Diğer ögelere CSS ızgara uygulama

Konteyner, etkileşim kutusu, flexbox ve tekrarlayıcı ögelerine CSS ızgara uygulayabilirsiniz. Özellikle tekrarlayıcı ögelerinde, ızgarayı bir ögeye uyguladığınızda, geri kalanı otomatik olarak güncellenir.

CSS ızgara uygulamak için:

  1. Editörde ilgili ögeyi seçin.
  2. Diğer Eylemler simgesine tıklayın.
  3. Gelişmiş CSS Izgara Uygula'ya tıklayın.
  4. 1x1 açılır menüsünden bir düzen seçin.
    İpucu: Satır ve sütun sayınızı kendiniz belirlemek istiyorsanız Diğer'i seçin. 
Başka bir düzen seçmek için tıklayabileceğiniz açılır menüyü gösteren bir ekran görüntüsü
Sırada ne var?
Denetçi panelinden satırları, sütunları ve aralıkları özelleştirin. Izgara çizgilerini tuvalde taşımak için de sürükleyebilirsiniz.  

CSS ızgarayı özelleştirme

Izgarayı özelleştirerek tam istediğiniz düzeni elde edin. Satır ve sütun sayılarını değiştirebilir, boyutlarını ve aralıklarını ayarlayabilirsiniz.

CSS ızgarayı özelleştirmek için:

  1. İlgili ögeyi veya bölümü seçin.
  2. Izgarayı nasıl özelleştirmek istediğinizi seçin: 
Kesme noktalarıyla çalışma:
Tasarımınız yalnızca üzerinde çalıştığınız kesme noktasında geçerlidir. Ögelerinizin kusursuz olmasını sağlamak için ızgarayı her kesme noktasına uyarlamanız gerekir. Aşağıdaki örnekte, kesme noktası başına farklı bir düzen belirledik (masaüstünde 3 sütun, tabletlerde 3 satır). 


Ögeleri ızgarada konumlandırma

Izgaraya öge eklerken, birkaç araç bunların yerleşimini daha doğru bir şekilde ayarlamanıza yardımcı olabilir.

Ögeleri yerleştirme

Izgara çizgilerine ögeleri yerleştirme özelliği, tam olarak istediğiniz gibi konumlandırılmalarını sağlar. Studio Editor'de tüm ögeler otomatik olarak yerleştirilir ama yerleştirmeyi manuel olarak ayarlayarak kenar boşlukları ekleyebilirsiniz. 
Izgara hücresindeki bir ögenin yerleştirme noktalarının nasıl değiştirileceğini gösteren GIF

Ögeleri ızgara hücreleri arasında taşıma

Denetçi'deki Konum bölümünün altında, bir öge seçebilir ve içinde bulunduğu ızgara hücresini görebilirsiniz. Ögeyi istediğiniz noktaya sürükle-bırak kullanmadan taşımak için herhangi bir ızgara hücresine tıklayın. 
Ayrıca, birden fazla ızgara hücresinin üzerine bir öge yerleştirmeniz gerektiğinde kullanışlı olan belirli sütun ve satır numaralarını da girebilirsiniz. 
Ögeleri hücreler arasında hızlı bir şekilde taşımak için Denetçi'de diğer hücrelere nasıl tıklanacağını gösteren bir GIF

Izgara birimleri tablosu

Izgarayı oluşturmak için tüm CSS birimleri seçeneklerini kullanın. Yüzdeleri, kesirleri veya pikselleri kullanarak sütunların ve satırların boyutunu ayarlayabilirsiniz. Alternatif olarak, sütun ve satırların minimum ve maksimum boyutlarını ayarlayın veya ihtiyacınız olan ızgarayı oluşturmak için hesaplamaları kullanın. 

Bu içerik yardımcı oldu mu?

|