Drupal Content Editor Guide | Grid

Drupal'da grid yapısı, içerikleri düzenlemenizi ve görsel olarak düzenlemelerinizi kolaylaştırmak için kullanılan bir araçtır. Bu yapı, web sitenizdeki içerikleri düzenlemek ve yerleştirmek için bir çerçeve sağlar.

Sütunlar (Columns);

• Sütunlar, sayfanızı yatay bir şekilde böler ve içerikleri bu sütunlarda düzenlemenizi sağlar.
• Her sütun, belirli bir genişlikte veya oranla ayarlanabilir. Örneğin, bir sütunu yarı genişlikte ayarlayabilirsiniz.
• Sütunların sayısı, içerik düzenlemeniz için esnek bir şekilde ayarlanabilir.
• 12 Parçadan oluşur farklı varyasyonlar vardır;
  • 1 Sütun; (12)
  • 2 Sütun  (6-6, 4-8, 5-7, 7-5, 8-4)
  • 3 Sütun (4-4-4, 6-3-3, 3-6-3, 3-3-6)
  • 4 Sütun (3-3-3-3)
• Örneğin, 2 sütundan oluşan bir 6-6 yapı oluşturmak için şu adımları izleyebilirsiniz: İçerik -> İçerik Ekle -> Bileşen yolunu takip ettikten sonra açılan sayfada "Grid Options" (Grid Seçenekleri) kısmından Grid Size (Grid Boyutu) seçeneğini kullanabilirsiniz. Burada bulunan 3 farklı Grid Size, farklı görünümleri temsil eder:
  • Grid Size(Large); Web Görünümünü Temsil Eder.
  • Grid Size(Medium); Tablet Görünümünü Temsil Eder.
  • Grid Size(Small); Mobil Görünümünü Temsil Eder.
• Eğer Grid Size(Large) Kısmında 6-6 Seçerek Grid'in altında 2 Adet Metin tipi içerik Oluşturursak Aşağıdaki gibi Görünecektir.

Ya da 4 Sütun 3-3-3-3 parça halinde bir grid'e 4 adet card eklersek aşağıdaki görüntüyü yakalarız.

Eğer bu oluşturduğumuz yapıya yukarıdan ve aşağıdan boşluk vermek istersek yine Grid (Izgara) 'in başka bir fonksiyonu olan Top, Bottom Space'i Kullanabiliriz. Pixel formatında 80, 52, 48, 24 pixellik boşluklardan birini seçebiliriz. Bu sayede içeriklerin daha nizami bir şekilde görünmesini sağlalrız.

Oluşturduğumuz yapının arka plan rengini değiştirmek için Background Color seçeneğini kullanabiliriz. Seçenekler; Default, Danger, Primary, Blue-Dark, Cream, Green, Orange ve Gray. Örneğin Blue-Dark seçersek bu şekilde gözükecektir.

Grid (Izgara) yapısındaki başka bir özellik ise Paragraph view mode'dur.  Eğer Paragraph view modu Wide Container seçerek Bir Mini Banner içeriği oluşturursak aşağıdaki gibi görünecektir;

Ya da Paragraph view mode'u varsayılan seçerek tüm ekrana yayılmasını sağlayabiliriz;