وقتی به طرح‌بندی‌ها فکر می‌کنیم، اغلب به طرح‌های سطح صفحه فکر می‌کنیم. اما اجزای کوچکتر درون صفحه می‌توانند طرح‌بندی‌های مستقل خود را داشته باشند.
در حالت ایده‌آل، این طرح‌بندی‌های سطح کامپوننت، صرف نظر از موقعیتشان در صفحه، به طور خودکار خود را تنظیم می‌کنند. ممکن است موقعیت‌هایی وجود داشته باشد که شما نمی‌دانید یک کامپوننت در ستون محتوای اصلی یا نوار کناری یا هر دو قرار خواهد گرفت. بدون دانستن دقیق محل قرارگیری یک کامپوننت، باید مطمئن شوید که کامپوننت می‌تواند خود را با محفظه‌اش تنظیم کند.
شبکه
CSS grid فقط برای طرح‌بندی‌های سطح صفحه نیست، بلکه برای کامپوننت‌هایی که درون آنها قرار دارند نیز به خوبی کار می‌کند.
در این مثال، شبه‌عناصر ::before و ::after خطوط تزئینی را در دو طرف یک عنوان ایجاد می‌کنند. خود عنوان یک ظرف شبکه‌ای است. عناصر جداگانه طوری چیده شده‌اند که خطوط همیشه فضای موجود را پر کنند.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
یاد بگیرید که چگونه طرح‌بندی‌های شبکه‌ای را در Chrome DevTools بررسی کنید .
فلکس‌باکس
همانطور که از نامش پیداست، می‌توانید از flexbox برای انعطاف‌پذیر کردن کامپوننت‌های خود استفاده کنید. می‌توانید مشخص کنید که کدام عناصر در کامپوننت شما باید حداقل یا حداکثر اندازه داشته باشند و اجازه دهید سایر عناصر متناسب با آن انعطاف‌پذیر شوند.
در این مثال، تصویر یک چهارم فضای موجود و متن سه چهارم دیگر را اشغال می‌کند. اما تصویر هرگز بزرگتر از ۲۰۰ پیکسل نمی‌شود.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
یاد بگیرید که چگونه طرح‌بندی‌های flexbox را در Chrome DevTools بررسی کنید .
پرس و جوهای کانتینر
Flexbox به شما امکان می‌دهد از محتوا به بیرون طراحی کنید. می‌توانید پارامترهای عناصر خود را مشخص کنید (چقدر باریک شوند، چقدر پهن شوند) و اجازه دهید مرورگر پیاده‌سازی نهایی را تشخیص دهد.
اما خودِ کامپوننت هیچ آگاهی از زمینه‌اش ندارد. نمی‌داند که آیا در محتوای اصلی استفاده می‌شود یا در نوار کناری. این می‌تواند طرح‌بندی کامپوننت را پیچیده‌تر از طرح‌بندی صفحه کند. برای اینکه بتوانید سبک‌های مرتبط با زمینه را اعمال کنید، کامپوننت‌های شما باید چیزی بیش از اندازه‌ی صفحه نمایشی که در آن قرار دارند را بدانند.
در طرح‌بندی صفحه، شما عرض ظرف را می‌دانید زیرا ظرف، نمای مرورگر است؛ پرس‌وجوهای رسانه‌ای ابعاد ظرف سطح صفحه را گزارش می‌دهند.
برای گزارش ابعاد هر کانتینر، از container queries استفاده کنید.
برای شروع، تعریف کنید که کدام عناصر به عنوان ظرف عمل می‌کنند.
main,
aside {
container-type: inline-size;
}
این یعنی شما می‌خواهید بُعد درون‌خطی را جستجو کنید. برای اسناد انگلیسی‌زبان، این محور افقی است. شما قرار است استایل‌ها را بر اساس عرض ظرف تغییر دهید.
اگر یک کامپوننت درون یکی از آن کانتینرها باشد، می‌توانید استایل‌ها را مشابه نحوه اعمال کوئری‌های رسانه‌ای اعمال کنید.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
اگر یک شیء رسانه‌ای درون ظرفی باشد که باریک‌تر از 25em باشد، استایل‌های flexbox اعمال نمی‌شوند. تصویر و متن به صورت عمودی نمایش داده می‌شوند.
اما اگر عنصر حاوی آن عریض‌تر از 25em باشد، تصویر و متن در کنار هم ظاهر می‌شوند.
با استفاده از کوئری‌های کانتینر، می‌توانید کامپوننت‌ها را به طور مستقل استایل‌دهی کنید. می‌توانید قوانینی را بر اساس عرض عنصر در برگیرنده بنویسید؛ عرض viewport دیگر اهمیتی ندارد.
ترکیب پرس‌وجوها
شما می‌توانید از مدیا کوئری‌ها برای طرح‌بندی صفحه و از کانتینر کوئری‌ها برای اجزای درون صفحه استفاده کنید.
در اینجا ساختار کلی صفحه دارای یک عنصر main و یک عنصر aside است. درون هر دو عنصر، اشیاء رسانه‌ای وجود دارد.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
یک کوئری مدیا، زمانی که عرض دید از 45em بیشتر باشد، یک طرح‌بندی شبکه‌ای (grid layout) را روی عناصر main و aside اعمال می‌کند.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
قانون کوئری کانتینر برای اشیاء رسانه‌ای یکسان باقی می‌ماند: فقط در صورتی که عنصر حاوی آن عریض‌تر از 25em باشد، طرح‌بندی افقی flexbox اعمال شود.
کوئری‌های کانتینری (Container Query) برای میکرولایتینگ‌ها (Micro Layout) انقلابی ایجاد می‌کنند. کامپوننت‌های شما می‌توانند مستقل و مستقل از نمای مرورگر باشند.
درک خود را بررسی کنید
دانش خود را در مورد طرح‌بندی‌های میکرو آزمایش کنید.
گرید و فلکس باکس هر دو برای میکرو لی‌آوت‌ها مفید هستند؟
قبلاً در مورد طرح‌بندی‌های کلان در سطح صفحه آموختید. اکنون در مورد طرح‌بندی‌های خرد در سطح کامپوننت می‌دانید.
در مرحله بعد، عمیق‌تر به اجزای سازنده محتوای خود خواهید پرداخت و یاد خواهید گرفت که چگونه تصاویر خود را واکنش‌گرا کنید. ابتدا، در مورد تایپوگرافی واکنش‌گرا یاد خواهید گرفت.