Makro düzenleri

Makro düzenleri, arayüzünüzün daha büyük, sayfa genelinde düzenlenmesini tanımlar.

Dar görünüm için bir sütunla aynı düzenin yanında bulunan iki sütunlu düzen şeması.

Herhangi bir düzeni uygulamadan önce içeriğinizin makul olduğundan emin olmalısınız. Daha küçük ekranlarda, tek sütunlu varsayılan sıralama kullanılır.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Sayfa düzeyindeki bu bileşenleri ayrı ayrı düzenlediğinizde, sayfanızın üst düzey bir görünümü olan bir makro düzeni tasarlarsınız. Medya sorgularını kullanarak, CSS'de bu görünümün farklı ekran boyutlarına nasıl ayarlanması gerektiğini açıklayan kurallar sağlayabilirsiniz.

Tablo

CSS ızgarası, sayfanıza düzen uygulamak için mükemmel bir araçtır. Yukarıdaki örnekte, yeterli ekran genişliği olduğunda iki sütunlu bir düzen istediğinizi varsayalım. Tarayıcı yeterince geniş olduğunda bu iki sütunlu düzeni uygulamak için belirtilen ayrılma noktasının üzerindeki ızgara stillerini tanımlamak üzere bir medya sorgusu kullanın.

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

Bu özel düzen için flexbox'ı da kullanabilirsiniz. Stiller şöyle görünür:

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

Ancak flexbox sürümü daha fazla CSS gerektirir. Her sütunun ne kadar yer kaplaması gerektiğini açıklayan ayrı bir kuralı vardır. Izgara örneğinde, aynı bilgiler kapsayıcı öğe için bir kurala kapsüllenir.

Medya sorgusuna mı ihtiyacınız var?

Her zaman bir medya sorgusu kullanmanız gerekmeyebilir. Medya sorguları, birkaç öğeye değişiklik uyguladığınızda sorunsuz çalışır. Ancak düzenin çok fazla güncellenmesi gerekiyorsa medya sorgularınız çok sayıda ayrılma noktası nedeniyle kontrol edilmeyebilir.

Kart bileşenleriyle dolu bir sayfanızın olduğunu varsayalım. Kartlar en fazla 15em genişliğinde olmalıdır ve bir satıra sığabilecek sayıda kart yerleştirmeniz önerilir. 30em, 45em, 60em vb. ayrılma noktalarına sahip medya sorguları yazabilirsiniz, ancak bu oldukça yorucu ve bakımı zor bir işlemdir.

Bunun yerine, kartların otomatik olarak doğru miktarda yer kaplaması için kurallar uygulayabilirsiniz.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Flexbox'ta benzer bir düzen oluşturabilirsiniz. Bu durumda, son satırı dolduracak kadar kart yoksa, sütunlarda hizalanmak yerine kalan kartlar mevcut alanı dolduracak şekilde genişletilir. Satır ve sütunları hizalamak istiyorsanız ızgarayı kullanın.

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Flexbox veya ızgarada bazı akıllı kurallar uygulayarak dinamik makro düzenleri minimum CSS ile ve herhangi bir medya sorgusu olmadan tasarlanabilir. Bu daha az iş yapmanıza neden olur; bunun yerine hesaplamaları tarayıcının yapması gerekir. Medya sorgusu gerektirmeden değişken modern CSS düzenlerinin bazı örneklerini görmek için 1linelayouts.com adresine bakın.

Öğrendiklerinizi sınayın

Makro düzenler hakkındaki bilginizi test edin.

Aşağıdaki cümlelerden hangisi makro düzenleri en iyi şekilde tanımlar?

Başka düzenler içeren düzenler.
Tekrar deneyin. Çoğu düzen başka düzenler içerir.
Bir tasarımda flexbox veya ızgara kullanımı.
Tekrar deneyin. Ne flexbox ne de ızgara, makro düzenlerine özel bir şey içermez.
Ekranın küçük bir kısmını kaplayan alt düzey düzenler.
Tekrar deneyin.
Ekranın büyük kısmını kaplayan üst düzey düzenler.
🎉 Makro düzenleri, büyük miktarda görsel alanı kaplayan ve genellikle sayfa boyutu medya sorgularıyla ayarlanan temel düzenlerdir.

Makro düzenleri farklı ekran boyutlarına uyum sağlamak için her zaman medya sorgularını kullanır mı?

Doğru
Tekrar deneyin. Bir makro düzeni, medya sorgularının kullanılmasıyla tanımlanmaz.
Yanlış
🎉 Makro düzenleri içeriğe sığmaya, mevcut alanı doldurmaya ve daha fazlasına medya sorgusu olmadan uyum sağlayabilir.

Sayfa düzeyinde makro düzenlerle ilgili fikir sahibi olduğunuza göre, dikkatinizi sayfadaki bileşenlere yoğunlaştırabilirsiniz. Bu, mikro düzenlerin alanıdır.