Makro düzenler, arayüzünüzün sayfa genelindeki daha büyük düzenini tanımlar.
Herhangi bir düzen uygulamadan önce içeriğinizin akışının mantıklı olduğundan emin olmalısınız. Tek sütunlu varsayılan sıralama, daha küçük ekranlarda gösterilir.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Bu tek tek sayfa düzeyindeki bileşenleri düzenlediğinizde makro düzen tasarlarsınız: Sayfanızın üst düzey görünümü. Medya sorgularını kullanarak CSS'de bu görünümün farklı ekran boyutlarına nasıl uyum sağlayacağını açıklayan kurallar sağlayabilirsiniz.
Izgara
CSS ızgarası, sayfanıza düzen uygulamak için mükemmel bir araçtır. Önceki ö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 belirli bir kesme 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 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 alan kaplaması gerektiğini açıklayan ayrı bir kural vardır. Izgara örneğinde, aynı bilgiler kapsayıcı öğe için tek bir kuralda kapsüllenmiştir.
Medya sorgusuna ihtiyacınız var mı?
Medya sorgusu kullanmanız her zaman gerekmeyebilir. Birkaç öğede değişiklik yaparken medya sorguları sorunsuz çalışır ancak düzenin çok fazla güncellenmesi gerekiyorsa medya sorgularınız çok sayıda kesme noktasıyla kontrolden çıkabilir.
Kart bileşenleriyle dolu bir sayfanız olduğunu varsayalım.
Kartlar hiçbir zaman 15em genişliğinden fazla olmuyor ve tek bir satıra mümkün olduğunca çok kart yerleştirmek istiyorsunuz.
30em, 45em ve 60em gibi kesme noktaları içeren medya sorguları yazabilirsiniz ancak bu oldukça yorucu ve bakımı zor bir yöntemdir.
Bunun yerine, kartların kendilerinin 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 kalan kartlar sütunlar halinde sıralanmak yerine kullanılabilir alanı dolduracak şekilde genişletilir. Satır ve sütunları hizalamak istiyorsanız kılavuzu kullanın.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Flexbox veya grid'de bazı akıllı kurallar uygulayarak, minimum CSS ile ve medya sorgusu kullanmadan dinamik makro düzenler tasarlamak mümkündür. Bu sayede daha az çalışırsınız. Hesaplamaları tarayıcı yapar. Medya sorguları gerektirmeyen akıcı modern CSS düzenlerinin bazı örneklerini görmek için 1linelayouts.com adresini ziyaret edin.
Bilgilerinizi sınayın
Makro düzenlerle ilgili bilginizi test edin.
Aşağıdaki cümlelerden hangisi makro düzenleri en iyi şekilde tanımlar?
Makro düzenler, farklı ekran boyutlarına uyum sağlamak için her zaman medya sorgularını mı kullanır?
Sayfa düzeyinde makro düzenlerle ilgili fikirler edindiğinize göre artık sayfa içindeki bileşenlere odaklanabilirsiniz. Bu, mikro düzenlerin alanıdır.