توابع ترک CSS Grid (fr، minmax()، auto، fit-content()) را برای اندازه‌بندی داینامیک لی‌آوت، طراحی واکنش‌گرا و توسعه وب انعطاف‌پذیر کاوش کنید. شامل مثال‌های عملی و بهترین شیوه‌ها.
توابع ترک در CSS Grid: تسلط بر اندازه‌بندی داینامیک لی‌آوت
CSS Grid یک سیستم چیدمان قدرتمند است که به توسعه‌دهندگان وب اجازه می‌دهد تا طرح‌های پیچیده و واکنش‌گرا را به راحتی ایجاد کنند. در قلب انعطاف‌پذیری CSS Grid، توابع ترک (track functions) آن قرار دارند. این توابع، شامل fr، minmax()، auto و fit-content()، مکانیزم‌هایی برای تعریف اندازه ترک‌های گرید (ردیف‌ها و ستون‌ها) به صورت داینامیک فراهم می‌کنند. درک این توابع برای تسلط بر CSS Grid و ایجاد لی‌آوت‌هایی که به طور یکپارچه با اندازه‌های مختلف صفحه و تغییرات محتوا سازگار می‌شوند، حیاتی است.
درک ترک‌های گرید (Grid Tracks)
قبل از پرداختن به توابع ترک خاص، درک اینکه ترک‌های گرید چه هستند ضروری است. یک ترک گرید فضایی بین هر دو خط گرید است. ستون‌ها ترک‌های عمودی و ردیف‌ها ترک‌های افقی هستند. اندازه این ترک‌ها نحوه توزیع محتوا در داخل گرید را تعیین می‌کند.
واحد fr: فضای کسری
واحد fr بخشی از فضای موجود در کانتینر گرید را نشان می‌دهد. این یک ابزار قدرتمند برای ایجاد لی‌آوت‌های انعطاف‌پذیر است که در آن ستون‌ها یا ردیف‌ها فضای باقی‌مانده را به صورت نسبی به اشتراک می‌گذارند. به آن به عنوان راهی برای تقسیم فضای موجود پس از محاسبه تمام ترک‌های با اندازه ثابت فکر کنید.
fr چگونه کار می‌کند
وقتی اندازه یک ترک گرید را با استفاده از fr تعریف می‌کنید، مرورگر با کم کردن اندازه ترک‌های با اندازه ثابت (مثلاً پیکسل، em) از کل اندازه کانتینر گرید، فضای موجود را محاسبه می‌کند. سپس فضای باقی‌مانده بین واحدهای fr بر اساس نسبت‌هایشان تقسیم می‌شود.
مثال: ستون‌های مساوی
برای ایجاد سه ستون با عرض مساوی، می‌توانید از CSS زیر استفاده کنید:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
این کد فضای موجود را به طور مساوی بین سه ستون تقسیم می‌کند. اگر کانتینر گرید ۶۰۰ پیکسل عرض داشته باشد، هر ستون ۲۰۰ پیکسل عرض خواهد داشت (با فرض عدم وجود فاصله یا حاشیه).
مثال: ستون‌های نسبی
برای ایجاد ستون‌هایی با نسبت‌های مختلف، می‌توانید از مقادیر متفاوت fr استفاده کنید:
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
در این مثال، ستون اول دو برابر فضای دو ستون دیگر را اشغال خواهد کرد. اگر کانتینر گرید ۶۰۰ پیکسل عرض داشته باشد، ستون اول ۳۰۰ پیکسل و دو ستون دیگر هر کدام ۱۵۰ پیکسل عرض خواهند داشت.
کاربرد عملی: لی‌آوت سایدبار واکنش‌گرا
واحد fr به ویژه برای ایجاد لی‌آوت‌های سایدبار واکنش‌گرا مفید است. یک لی‌آوت با سایدبار با عرض ثابت و یک ناحیه محتوای اصلی انعطاف‌پذیر را در نظر بگیرید:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
.sidebar {
/* Sidebar styles */
}
.main-content {
/* Main content styles */
}
در این تنظیم، سایدبار همیشه ۲۰۰ پیکسل عرض خواهد داشت، در حالی که ناحیه محتوای اصلی برای پر کردن فضای باقی‌مانده گسترش می‌یابد. این لی‌آوت به طور خودکار با اندازه‌های مختلف صفحه سازگار می‌شود و اطمینان می‌دهد که محتوا همیشه بهینه نمایش داده می‌شود.
تابع minmax(): محدودیت‌های اندازه انعطاف‌پذیر
تابع minmax() محدوده‌ای از اندازه‌های قابل قبول برای یک ترک گرید تعریف می‌کند. این تابع دو آرگومان می‌گیرد: یک اندازه حداقل و یک اندازه حداکثر.
minmax(min, max)
ترک گرید همیشه حداقل به اندازه حداقل خواهد بود، اما اگر فضای موجود وجود داشته باشد می‌تواند تا اندازه حداکثر رشد کند. این تابع برای ایجاد لی‌آوت‌های واکنش‌گرا که با طول‌های مختلف محتوا و اندازه‌های صفحه سازگار می‌شوند، بسیار ارزشمند است.
مثال: محدود کردن عرض ستون
برای اطمینان از اینکه یک ستون هرگز بیش از حد باریک یا عریض نشود، می‌توانید از minmax() استفاده کنید:
.grid-container {
display: grid;
grid-template-columns: minmax(200px, 1fr) 1fr;
}
در این مثال، ستون اول حداقل ۲۰۰ پیکسل عرض خواهد داشت، اما می‌تواند برای پر کردن فضای موجود رشد کند، تا کسری از فضای باقی‌مانده که توسط 1fr تعریف شده است. این کار از باریک شدن بیش از حد ستون در صفحات کوچک یا عریض شدن بیش از حد آن در صفحات بزرگ جلوگیری می‌کند. ستون دوم فضای باقی‌مانده را به صورت کسری اشغال می‌کند.
مثال: جلوگیری از سرریز محتوا
minmax() همچنین می‌تواند برای جلوگیری از سرریز شدن محتوا از کانتینر خود استفاده شود. سناریویی را در نظر بگیرید که در آن ستونی دارید که باید مقدار متغیری از متن را در خود جای دهد:
.grid-container {
display: grid;
grid-template-columns: 100px minmax(150px, auto) 100px;
}
در اینجا، ستون میانی حداقل ۱۵۰ پیکسل عرض خواهد داشت. اگر محتوا به فضای بیشتری نیاز داشته باشد، ستون برای جای دادن آن گسترش می‌یابد. کلمه کلیدی auto به عنوان مقدار حداکثر به ترک می‌گوید که خود را بر اساس محتوای درونش اندازه‌بندی کند و اطمینان می‌دهد که محتوا هرگز سرریز نمی‌شود. دو ستون کناری با عرض ثابت ۱۰۰ پیکسل باقی می‌مانند.
کاربرد عملی: گالری تصاویر واکنش‌گرا
ایجاد یک گالری تصاویر را در نظر بگیرید که می‌خواهید تصاویر را در یک ردیف نمایش دهید، اما می‌خواهید اطمینان حاصل کنید که در صفحات کوچک بیش از حد کوچک یا در صفحات بزرگ بیش از حد بزرگ نشوند:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}
.grid-item {
/* Image styles */
}
ترکیب `repeat(auto-fit, minmax(150px, 1fr))` بسیار قدرتمند است. `auto-fit` به طور خودکار تعداد ستون‌ها را بر اساس فضای موجود تنظیم می‌کند. `minmax(150px, 1fr)` اطمینان می‌دهد که هر تصویر حداقل ۱۵۰ پیکسل عرض داشته باشد و می‌تواند برای پر کردن فضای موجود رشد کند. این کار یک گالری تصاویر واکنش‌گرا ایجاد می‌کند که با اندازه‌های مختلف صفحه سازگار است و تجربه مشاهده ثابتی را فراهم می‌کند. اضافه کردن `object-fit: cover;` به CSS `.grid-item` را در نظر بگیرید تا اطمینان حاصل شود که تصاویر فضا را به درستی و بدون تغییر شکل پر می‌کنند.
کلمه کلیدی auto: اندازه‌بندی مبتنی بر محتوا
کلمه کلیدی auto به گرید دستور می‌دهد که ترک را بر اساس محتوای درون آن اندازه‌بندی کند. ترک برای جا دادن محتوا گسترش می‌یابد، اما کوچکتر از حداقل اندازه محتوا نخواهد شد.
auto چگونه کار می‌کند
هنگامی که از auto استفاده می‌کنید، اندازه ترک گرید توسط اندازه ذاتی محتوای درون آن تعیین می‌شود. این به ویژه برای سناریوهایی که اندازه محتوا غیرقابل پیش‌بینی یا متغیر است، مفید است.
مثال: ستون انعطاف‌پذیر برای متن
یک لی‌آوت را در نظر بگیرید که در آن ستونی دارید که باید مقدار متغیری از متن را در خود جای دهد:
.grid-container {
display: grid;
grid-template-columns: 200px auto 1fr;
}
در این مثال، ستون اول با عرض ثابت ۲۰۰ پیکسل است. ستون دوم روی auto تنظیم شده است، بنابراین برای جا دادن محتوای متنی درون خود گسترش می‌یابد. ستون سوم فضای باقی‌مانده را به صورت کسری استفاده می‌کند و انعطاف‌پذیر است.
مثال: ردیف‌هایی با ارتفاع متغیر
شما همچنین می‌توانید از auto برای ردیف‌ها استفاده کنید. این زمانی مفید است که ردیف‌هایی با محتوایی دارید که ممکن است ارتفاع متفاوتی داشته باشند:
.grid-container {
display: grid;
grid-template-rows: auto auto auto;
}
در این حالت، هر ردیف به طور خودکار ارتفاع خود را برای جا دادن محتوای درونش تنظیم می‌کند. این برای ایجاد لی‌آوت‌هایی با محتوای داینامیک، مانند پست‌های وبلاگ یا مقالاتی با مقادیر مختلف متن و تصویر، مفید است.
کاربرد عملی: منوی ناوبری واکنش‌گرا
شما می‌توانید از auto برای ایجاد یک منوی ناوبری واکنش‌گرا استفاده کنید که در آن عرض هر آیتم منو بر اساس محتوای آن تنظیم می‌شود:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, auto);
grid-gap: 10px;
}
.menu-item {
/* Menu item styles */
}
استفاده از `repeat(auto-fit, auto)` به تعداد لازم ستون برای جا دادن آیتم‌های منو ایجاد می‌کند و عرض هر آیتم توسط محتوای آن تعیین می‌شود. کلمه کلیدی `auto-fit` اطمینان می‌دهد که آیتم‌ها در صفحات کوچکتر به خط بعدی منتقل می‌شوند. به یاد داشته باشید که برای نمایش مناسب و زیبایی، `menu-item` را نیز استایل‌دهی کنید.
تابع fit-content(): محدود کردن اندازه‌بندی مبتنی بر محتوا
تابع fit-content() راهی برای محدود کردن اندازه یک ترک گرید بر اساس محتوای آن فراهم می‌کند. این تابع یک آرگومان می‌گیرد: حداکثر اندازه‌ای که ترک می‌تواند اشغال کند. ترک برای جا دادن محتوا گسترش می‌یابد، اما هرگز از حداکثر اندازه مشخص شده تجاوز نخواهد کرد.
fit-content(max-size)
fit-content() چگونه کار می‌کند
تابع fit-content() اندازه ترک گرید را بر اساس محتوای درون آن محاسبه می‌کند. با این حال، اطمینان می‌دهد که اندازه ترک هرگز از حداکثر اندازه مشخص شده در آرگومان تابع تجاوز نمی‌کند.
مثال: محدود کردن گسترش ستون
یک لی‌آوت را در نظر بگیرید که در آن می‌خواهید یک ستون برای جا دادن محتوایش گسترش یابد، اما نمی‌خواهید بیش از حد عریض شود:
.grid-container {
display: grid;
grid-template-columns: 100px fit-content(300px) 1fr;
}
در این مثال، ستون دوم برای جا دادن محتوایش گسترش می‌یابد، اما هرگز از عرض ۳۰۰ پیکسل تجاوز نخواهد کرد. اگر محتوا به بیش از ۳۰۰ پیکسل نیاز داشته باشد، ستون در ۳۰۰ پیکسل بریده می‌شود (مگر اینکه `overflow: visible` را روی آیتم گرید تنظیم کرده باشید). ستون اول با عرض ثابت باقی می‌ماند و ستون نهایی فضای باقی‌مانده را به صورت کسری دریافت می‌کند.
مثال: کنترل ارتفاع ردیف
شما همچنین می‌توانید از fit-content() برای ردیف‌ها برای کنترل ارتفاع آنها استفاده کنید:
.grid-container {
display: grid;
grid-template-rows: fit-content(200px) 1fr;
}
در اینجا، ردیف اول برای جا دادن محتوایش گسترش می‌یابد، اما هرگز از ارتفاع ۲۰۰ پیکسل تجاوز نخواهد کرد. ردیف دوم بقیه فضا را به عنوان کسری از کل ارتفاع موجود اشغال خواهد کرد.
کاربرد عملی: لی‌آوت کارت واکنش‌گرا
fit-content() برای ایجاد لی‌آوت‌های کارت واکنش‌گرا مفید است که در آن می‌خواهید کارت‌ها برای جا دادن محتوای خود گسترش یابند، اما می‌خواهید عرض آنها را محدود کنید:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
grid-gap: 10px;
}
.card {
/* Card styles */
}
این کد یک لی‌آوت کارت واکنش‌گرا ایجاد می‌کند که در آن هر کارت حداقل ۲۰۰ پیکسل عرض دارد و می‌تواند برای جا دادن محتوای خود تا حداکثر ۳۰۰ پیکسل گسترش یابد. `repeat(auto-fit, ...)` اطمینان می‌دهد که کارت‌ها در صفحات کوچکتر به خط بعدی منتقل می‌شوند. در داخل تابع repeat، استفاده از `minmax` به همراه `fit-content` سطح کنترل بالاتری را فراهم می‌کند - اطمینان می‌دهد که آیتم‌ها همیشه حداقل عرض ۲۰۰ پیکسل خواهند داشت، اما همچنین هرگز عریض‌تر از ۳۰۰ پیکسل نخواهند بود (با فرض اینکه محتوای داخل از این مقدار تجاوز نکند). این استراتژی به ویژه اگر می‌خواهید ظاهر و احساس یکسانی در اندازه‌های مختلف صفحه داشته باشید، ارزشمند است. فراموش نکنید که کلاس `.card` را با پدینگ، مارجین و سایر ویژگی‌های بصری مناسب استایل‌دهی کنید تا به ظاهر دلخواه برسید.
ترکیب توابع ترک برای لی‌آوت‌های پیشرفته
قدرت واقعی توابع ترک CSS Grid از ترکیب آنها برای ایجاد لی‌آوت‌های پیچیده و داینامیک ناشی می‌شود. با استفاده استراتژیک از fr، minmax()، auto و fit-content()، می‌توانید به طیف گسترده‌ای از طرح‌های واکنش‌گرا و انعطاف‌پذیر دست یابید.
مثال: واحدهای و توابع ترکیبی
یک لی‌آوت با سایدبار با عرض ثابت، یک ناحیه محتوای اصلی انعطاف‌پذیر، و یک ستون که برای جا دادن محتوای خود گسترش می‌یابد اما حداکثر عرض دارد را در نظر بگیرید:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr fit-content(400px);
}
در این مثال، ستون اول با عرض ثابت ۲۰۰ پیکسل است. ستون دوم فضای باقی‌مانده را با استفاده از 1fr اشغال می‌کند. ستون سوم برای جا دادن محتوای خود گسترش می‌یابد اما با استفاده از fit-content(400px) به حداکثر عرض ۴۰۰ پیکسل محدود شده است.
مثال: طراحی واکنش‌گرای پیچیده
بیایید یک مثال پیچیده‌تر از یک لی‌آوت وب‌سایت با هدر، سایدبار، محتوای اصلی و فوتر ایجاد کنیم:
.grid-container {
display: grid;
grid-template-columns: minmax(150px, 250px) 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
height: 100vh;
}
header {
grid-area: header;
/* Header styles */
}
.sidebar {
grid-area: sidebar;
/* Sidebar styles */
}
main {
grid-area: main;
/* Main content styles */
}
footer {
grid-area: footer;
/* Footer styles */
}
در این لی‌آوت:
grid-template-columnsدو ستون تعریف می‌کند: یک سایدبار با حداقل عرض ۱۵۰ پیکسل و حداکثر عرض ۲۵۰ پیکسل، و یک ناحیه محتوای اصلی که فضای باقی‌مانده را با استفاده از1frاشغال می‌کند.grid-template-rowsسه ردیف تعریف می‌کند: یک هدر و فوتر که به طور خودکار ارتفاع خود را برای جا دادن محتوایشان تنظیم می‌کنند (auto)، و یک ناحیه محتوای اصلی که فضای عمودی باقی‌مانده را با استفاده از1frاشغال می‌کند.- ویژگی
grid-template-areasساختار لی‌آوت را با استفاده از نواحی گرید نام‌گذاری شده تعریف می‌کند.
این مثال نشان می‌دهد که چگونه می‌توان توابع ترک و نواحی گرید را برای ایجاد یک لی‌آوت وب‌سایت انعطاف‌پذیر و واکنش‌گرا ترکیب کرد. به یاد داشته باشید که استایل‌دهی مناسب را به هر بخش (هدر، سایدبار، اصلی، فوتر) اضافه کنید تا از نمایش بصری صحیح اطمینان حاصل شود.
بهترین شیوه‌ها برای استفاده از توابع ترک CSS Grid
برای استفاده بهینه از توابع ترک CSS Grid، بهترین شیوه‌های زیر را در نظر بگیرید:
- اولویت‌بندی محتوا: همیشه هنگام تعیین اندازه ترک‌ها، محتوا را در اولویت قرار دهید. لی‌آوت باید با محتوا سازگار شود، نه برعکس.
- استفاده از
minmax()برای واکنش‌گرایی: ازminmax()برای تعریف محدوده‌ای از اندازه‌های قابل قبول برای ترک‌های گرید استفاده کنید تا اطمینان حاصل شود که با اندازه‌های مختلف صفحه و تغییرات محتوا سازگار هستند. - ترکیب استراتژیک توابع: توابع ترک را برای ایجاد لی‌آوت‌های پیچیده و داینامیک ترکیب کنید. به عنوان مثال، از
minmax()وfrبا هم برای ایجاد ستون‌های انعطاف‌پذیر با محدودیت‌های حداقل و حداکثر عرض استفاده کنید. - تست روی دستگاه‌های مختلف: همیشه لی‌آوت‌های خود را روی دستگاه‌ها و اندازه‌های مختلف صفحه آزمایش کنید تا اطمینان حاصل شود که واکنش‌گرا و از نظر بصری جذاب هستند.
- در نظر گرفتن دسترسی‌پذیری: اطمینان حاصل کنید که لی‌آوت‌های شما برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترسی هستند. از HTML معنایی استفاده کنید و متن جایگزین برای تصاویر فراهم کنید.
- استفاده از ابزارهای بازرسی گرید: اکثر مرورگرهای مدرن ابزارهای داخلی بازرسی گرید دارند که می‌توانند به شما در تجسم و اشکال‌زدایی لی‌آوت‌های گرید کمک کنند. این ابزارها می‌توانند برای درک چگونگی تأثیر توابع ترک بر لی‌آوت شما بسیار ارزشمند باشند.
ملاحظات جهانی برای CSS Grid
هنگام توسعه وب‌سایت‌ها برای مخاطبان جهانی، در نظر گرفتن تفاوت‌های فرهنگی و تغییرات منطقه‌ای مهم است. در اینجا برخی ملاحظات خاص CSS Grid آورده شده است:
- جهت لی‌آوت (ویژگی
direction): ویژگیdirectionمی‌تواند برای تغییر جهت لی‌آوت گرید استفاده شود. به عنوان مثال، در زبان‌های راست به چپ (RTL) مانند عربی و عبری، می‌توانیدdirection: rtl;را برای معکوس کردن جهت لی‌آوت تنظیم کنید. CSS Grid به طور خودکار با جهت لی‌آوت سازگار می‌شود و اطمینان می‌دهد که لی‌آوت به درستی در زبان‌های مختلف نمایش داده می‌شود. - ویژگی‌های منطقی (
inset-inline-start،inset-inline-endو غیره): به جای استفاده از ویژگی‌های فیزیکی مانندleftوright, از ویژگی‌های منطقی مانندinset-inline-startوinset-inline-endاستفاده کنید. این ویژگی‌ها به طور خودکار با جهت لی‌آوت سازگار می‌شوند و اطمینان می‌دهند که لی‌آوت در هر دو زبان LTR و RTL سازگار است. - اندازه فونت‌ها: به اندازه فونت‌های مورد استفاده در عناصر گرید خود توجه داشته باشید. زبان‌های مختلف ممکن است برای خوانایی بهینه به اندازه‌های فونت متفاوتی نیاز داشته باشند. استفاده از واحدهای نسبی مانند
emیاremرا در نظر بگیرید تا به اندازه‌های فونت اجازه دهید بر اساس ترجیحات کاربر مقیاس‌بندی شوند. - فرمت‌های تاریخ و عدد: اگر لی‌آوت گرید شما شامل تاریخ یا اعداد است، حتماً آنها را به درستی برای منطقه کاربر فرمت‌بندی کنید. از جاوا اسکریپت یا یک کتابخانه سمت سرور برای فرمت‌بندی تاریخ و اعداد مطابق با تنظیمات زبان و منطقه کاربر استفاده کنید.
- تصاویر و آیکون‌ها: آگاه باشید که برخی تصاویر و آیکون‌ها ممکن است در فرهنگ‌های مختلف معانی یا مفاهیم متفاوتی داشته باشند. از استفاده از تصاویر یا آیکون‌هایی که می‌توانند توهین‌آمیز یا از نظر فرهنگی حساس باشند، خودداری کنید. به عنوان مثال، یک حرکت دست که در یک فرهنگ مثبت تلقی می‌شود، ممکن است در فرهنگ دیگری توهین‌آمیز تلقی شود.
- ترجمه و بومی‌سازی: اگر وب‌سایت شما به چندین زبان در دسترس است، حتماً تمام متن‌های داخل لی‌آوت گرید خود، از جمله عناوین، برچسب‌ها و محتوا را ترجمه کنید. استفاده از یک سیستم مدیریت ترجمه را برای ساده‌سازی فرآیند ترجمه و اطمینان از سازگاری در زبان‌های مختلف در نظر بگیرید.
نتیجه‌گیری
توابع ترک CSS Grid ابزارهای ضروری برای ایجاد لی‌آوت‌های داینامیک و واکنش‌گرا هستند که با اندازه‌های مختلف صفحه و تغییرات محتوا سازگار می‌شوند. با تسلط بر fr، minmax()، auto و fit-content()، می‌توانید لی‌آوت‌های پیچیده و انعطاف‌پذیری بسازید که تجربه کاربری ثابت و جذابی را در همه دستگاه‌ها و پلتفرم‌ها فراهم می‌کنند. به یاد داشته باشید که محتوا را در اولویت قرار دهید، از minmax() برای واکنش‌گرایی استفاده کنید، توابع را به صورت استراتژیک ترکیب کنید و روی دستگاه‌های مختلف آزمایش کنید تا اطمینان حاصل شود که لی‌آوت‌های شما از نظر بصری جذاب و برای همه کاربران قابل دسترسی هستند. با در نظر گرفتن ملاحظات جهانی برای زبان و فرهنگ، می‌توانید وب‌سایت‌هایی ایجاد کنید که برای مخاطبان جهانی قابل دسترس و جذاب باشند.
با تمرین و آزمایش، می‌توانید از قدرت کامل توابع ترک CSS Grid بهره‌مند شوید و لی‌آوت‌های خیره‌کننده و واکنش‌گرایی ایجاد کنید که مهارت‌های توسعه وب شما را ارتقا داده و تجربه کاربری بهتری را برای مخاطبان شما فراهم می‌کند.