Makro düzenleri

Makro düzenler, arayüzünüzün daha büyük, sayfa genelindeki düzenini tanımlar.

Dar bir görünüm için tek sütunla aynı düzenin yanında bulunan iki sütunlu düzenin tel çerçevesi.

Herhangi bir düzeni uygulamadan önce içeriğinizin akışının mantıklı olduğundan emin olmalısınız. Daha küçük ekranlar bu tek sütunlu varsayılan sıralamayı kullanır.

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

Bu sayfa düzeyindeki bileşenleri tek tek ayarladığınızda, makro düzen tasarlıyorsanız sayfanızın üst düzey görünümünü elde edersiniz. 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.

Izgara

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ş hale geldiğinde bu iki sütunlu düzeni uygulamak için belirtilen bir ayrılma noktasının üzerindeki ızgara stillerini tanımlamak için bir medya sorgusu kullanın.

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

Esnek Kutu

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ütunda ne kadar alan kaplaması gerektiğini belirten ayrı bir kural vardır. Izgara örneğinde aynı bilgiler, kapsayıcı öğe için tek bir kurala yerleştirilir.

Medya sorgusuna ihtiyacınız var mı?

Her zaman bir medya sorgusu kullanmanız gerekmeyebilir. Değişiklikleri birkaç öğeye uyguladığınızda medya sorguları düzgün çalışır; Ancak düzenin çok fazla güncellenmesi gerekiyorsa medya sorgularınız çok fazla ayrılma noktasıyla birlikte zorlanabilir.

Kart bileşenleriyle dolu bir sayfanız olduğunu varsayalım. Kartlar hiçbir zaman 15em sınırını aşmaz ve tek satıra sığabilecek kadar çok kart yerleştirmek istersiniz. Ayrılma noktaları 30em, 45em, 60em, Ancak bu alışkanlıklar oldukça yorucu ve yönetmesi zor bir iştir.

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

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

Flexbox ile benzer bir düzen elde edebilirsiniz. Bu durumda, son satırı dolduracak kadar kart yoksa geri kalan kartlar, sütunlara yerleştirilmek yerine kullanılabilir alanı dolduracak şekilde genişletilir. Satırları ve sütunları hizalamak istiyorsanız ızgara seçeneğini 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 çok az CSS ile ve medya sorgusu olmadan tasarlanabilir. Bu durumda daha az uğraşırsınız. Bunun yerine hesaplamaları tarayıcının yapması gerekir. Medya sorgusu gerektirmeden esnek olan modern CSS düzenlerine ilişkin bazı örnekleri görmek için bkz. 1linelayouts.com adresine gidin.

Öğrendiklerinizi sınayın

Makro düzenler hakkındaki bilginizi test edin.

Makro düzenleri en iyi tanımlayan cümle hangisidir?

Diğer düzenleri içeren düzenler.
Tekrar deneyin. Çoğu düzen başka düzenler de içerir.
Bir tasarımda flexbox veya ızgara kullanıldığında.
Tekrar deneyin. Flexbox veya ızgarada makro düzenlere özgü bir şey yoktur.
Ekranın küçük bir kısmını kaplayan alt düzey düzenler.
Tekrar deneyin.
Ekranın büyük miktarını kaplayan üst düzey düzenler.
🎉 Büyük miktarda görsel alana yayılan makro düzenleri, sayfaların temel düzenleridir ve genellikle sayfa boyutu medya sorgularıyla ayarlanır.

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

Doğru
Tekrar deneyin. Bir makro düzen, medya sorgularının kullanımıyla tanımlanmaz.
Yanlış
🎉 Makro düzenleri, medya sorgusu olmadan içeriğe sığdırmak, mevcut alanı doldurmak ve daha fazlasını yapmak için uyarlanabilir.

Artık sayfa düzeyinde makro düzenleri hakkında fikir sahibi olduğunuza göre dikkatinizi sayfadaki bileşenlere çekin. Bu, dünyanın mikro düzenler.