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, %).
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.
kullanabilirsiniz.Bölüm ızgarasından CSS ızgaraya geçmek için:
- Editörde ilgili bölümü seçin.
- Editörün sağ üstündeki Denetçiyi Aç okuna
tıklayın. - Sayfayı aşağı kaydırarak Düzen'e gidin.
- Gelişmiş CSS Izgara'nın yanındaki Geçiş Yap düğmesine tıklayın.
- CSS Izgaraya Geç'e tıklayın.
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:
- Editörde ilgili ögeyi seçin.
- Diğer Eylemler simgesine
tıklayın. - Gelişmiş CSS Izgara Uygula'ya tıklayın.
- 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.
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.
İpucu:
Bir ızgara tasarlarken, yalnızca üzerinde çalıştığınız belirli kesme noktasında geçerlidir. Ögelerinizin kusursuz olmasını sağlamak için ızgarayı her kesme noktasına uyarlamanız gerekir.
CSS ızgarayı özelleştirmek için:
- İlgili ögeyi veya bölümü seçin.
- Izgarayı nasıl özelleştirmek istediğinizi seçin:
Farklı bir düzen seçin
Daha fazla satır ve sütun ekleme
tıklayın.
tıklayın. 
Sütunlarınızın ve satırlarınızın boyutunu değiştirme
Sütun veya satırı silme
simgesine tıklayın
Boşlukların boyutunu düzenleme
Ö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.
Ö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.
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.
Yüzde (%)
Kesir (fr)
Otomatik
Piksel (px)
Görüntü alanı genişliği ve yüksekliği (vw ve vh)
Minimum ve Maksimum içerik
Minimum/maks
Hesaplama
Bu içerik yardımcı oldu mu?
|