Makro düzenleri, arayüzünüzün daha büyük, sayfa genelinde düzenlenmesini tanımlar.
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?
Makro düzenleri farklı ekran boyutlarına uyum sağlamak için her zaman medya sorgularını kullanır mı?
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.