طرحبندیهای ماکرو، سازماندهی بزرگتر و در سطح صفحه رابط کاربری شما را توصیف میکنند.
قبل از اعمال هرگونه طرحبندی، باید مطمئن شوید که جریان محتوای شما منطقی است. این ترتیب پیشفرض تک ستونی همان چیزی است که صفحههای نمایش کوچکتر دریافت میکنند.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
وقتی این اجزای سطح صفحه را مرتب میکنید، در حال طراحی یک طرحبندی کلان هستید: یک نمای سطح بالا از صفحه شما. با استفاده از پرسوجوهای رسانهای، میتوانید قوانینی را در CSS ارائه دهید که نحوه تنظیم این نما را با اندازههای مختلف صفحه نمایش توصیف میکند.
شبکه
CSS grid ابزاری عالی برای اعمال یک طرحبندی به صفحه شماست. در مثال قبلی، فرض کنید میخواهید یک طرحبندی دو ستونه داشته باشید، زمانی که عرض صفحه نمایش به اندازه کافی در دسترس باشد. برای اعمال این طرحبندی دو ستونه، زمانی که مرورگر به اندازه کافی عریض شد، از یک کوئری رسانهای برای تعریف استایلهای شبکهای در بالای یک نقطه شکست مشخص استفاده کنید.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
فلکسباکس
برای این طرحبندی خاص، میتوانید از flexbox نیز استفاده کنید. استایلها به این شکل خواهند بود:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
با این حال، نسخه flexbox به CSS بیشتری نیاز دارد. هر ستون یک قانون جداگانه برای توصیف میزان فضایی که باید اشغال کند، دارد. در مثال grid، همان اطلاعات در یک قانون برای عنصر حاوی آن محصور شده است.
آیا به یک پرس و جوی رسانهای نیاز دارید؟
ممکن است همیشه نیازی به استفاده از مدیا کوئری نداشته باشید. مدیا کوئریها وقتی روی چند عنصر تغییر ایجاد میکنید خوب کار میکنند، اما اگر طرحبندی نیاز به بهروزرسانیهای زیادی داشته باشد، مدیا کوئریهای شما میتوانند با تعداد زیادی نقطه توقف از کنترل خارج شوند.
فرض کنید صفحهای پر از اجزای کارت دارید. کارتها هرگز از 15em عریضتر نیستند و شما میخواهید تا جایی که در یک خط جا میشود، کارتها را در آن قرار دهید. میتوانید کوئریهای رسانهای با نقاط شکست مانند 30em ، 45em و 60em بنویسید، اما این کار بسیار خستهکننده و نگهداری آن دشوار است.
در عوض، میتوانید قوانینی را اعمال کنید تا خود کارتها به طور خودکار فضای مناسبی را اشغال کنند.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
شما میتوانید با flexbox به طرحبندی مشابهی دست یابید. در این حالت، اگر کارتهای کافی برای پر کردن ردیف آخر وجود نداشته باشد، کارتهای باقیمانده به جای اینکه در ستونها ردیف شوند، کشیده میشوند تا فضای موجود را پر کنند. اگر میخواهید ردیفها و ستونها را در یک راستا قرار دهید، از grid استفاده کنید.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
با اعمال برخی قوانین هوشمند در flexbox یا grid، میتوان طرحبندیهای ماکروی پویا را با حداقل CSS و بدون هیچگونه media query طراحی کرد. این کار برای شما کمتر است - در عوض، مرورگر را مجبور به انجام محاسبات میکنید. برای دیدن چند نمونه از طرحبندیهای مدرن CSS که بدون نیاز به media query روان هستند، به 1linelayouts.com مراجعه کنید.
درک خود را بررسی کنید
دانش خود را در مورد طرحبندیهای ماکرو آزمایش کنید.
کدام جمله طرحبندیهای ماکرو را به بهترین شکل توصیف میکند؟
طرحبندیهای ماکرو همیشه از کوئریهای رسانهای برای تطبیق با اندازههای مختلف صفحه نمایش استفاده میکنند؟
حالا که ایدههایی برای طرحبندیهای کلان در سطح صفحه دارید، توجه خود را به اجزای درون صفحه معطوف کنید. این قلمرو طرحبندیهای خرد است.