سیستم‌های گرید: راهنمای طراح
از مولر-براکمان تا CSS Grid، راهنمای طراح شاغل برای سیستم‌های گرید. پنج نوع گرید، سیستم ۱۲ ستونه، ریتم خط پایه، به‌همراه پیاده‌سازی‌های واقعی از Linear، Vercel، Stripe، Apple، NYT و Figma.
سیستم‌های گرید بخشی از طراحی‌اند که بیشترین کار را میکنند و کمترین اعتبار را میگیرند. هر محصولی که به آن احترام می‌گذارید یک گرید دارد و هر محصولی که از کنارش رد می‌شوید ندارد. گرید تزئین نیست. قراردادی است که تایپوگرافی، سلسله‌مراتب و ریتم را کنار هم نگه می‌دارد تا کاربر صفحه را با یک نگاه بخواند، نه اینکه رمزگشایی‌اش کند.
مکتب سوئیسی شصت سال پیش این را در چاپ ثابت کرد. مولر-براکمان، هافمن، رودر، نسلی کامل از طراحان که گرید را ابزار تفکر می‌دانستند، نه میانبر چیدمان. این درس بهتر از تقریباً هر نظریه طراحی دیگری پیر شد. هر گرید محصول مدرن، از Linear تا Stripe تا نیویورک تایمز، از همین ایده نشأت می‌گیرد. این مرجع کاری گرید در ۲۰۲۶ است.
مولر-براکمان به گرید مدرن دستور زبانش را داد
کتاب «Grid Systems in Graphic Design» اثر یوزف مولر-براکمان در ۱۹۸۱ هنوز ستون فقرات این حوزه است. پیش از آن کتاب، گریدها وجود داشتند اما واژگانشان نه. بعد از آن، طراحان زبانی مشترک برای ستون، گاتر، حاشیه و ماژول داشتند که میان استودیوها، مدارس و دهه‌ها سفر می‌کرد.
مکتب سوئیسی گرید را موتور محدودیت می‌دید. یک سیستم انتخاب کن، به آن پایبند بمان و بگذار تنوع از محتوا بیاید، نه از بداهه‌پردازی. پوسترهای مولر-براکمان برای تونهاله زوریخ در ۲۰۲۶ مثل اسکرین‌شات رابط محصول به نظر می‌رسند، چون همان منطق را اجرا میکنند.
تایپ قوی روی گرید ثابت. فضای خالی به‌عنوان عنصر ساختاری، نه فضای باقی‌مانده. همین منطق امروز در نوشته‌هایی مثل چرا در ۲۰۲۶ همه SaaSها شبیه هم‌اند دیده میشود، جایی که یکنواختی یعنی گرید برنده شد و بعد نیشش را از دست داد.
وب این دستور زبان را آهسته به ارث برد. CSS اول فلوت‌ها را داد، بعد Flexbox و بالاخره CSS Grid. هر گام فاصله میان کاری که طراح چاپ در ۱۹۶۱ می‌توانست بکند و کاری که طراح فرانت‌اند در مرورگر می‌تواند را کمتر کرد.
واژگان عوض نشد. ستون هنوز ستون است. فقط ابزارها رسیدند.
چرا گریدها کار میکنند، در یک پاراگراف
گرید کار میکند چون هزار تصمیم کوچک را از دوش طراح برمی‌دارد و به شکل پیش‌بینی‌پذیری به کاربر برمی‌گرداند. چشم ریتم را در ثانیه اول صفحه یاد می‌گیرد و از آن برای پیمایش همه چیزهای بعدی استفاده میکند.
بدون گرید، هر تصمیم چیدمان تازه است. عنوان کجا می‌نشیند، تصویر کجا تمام میشود، متن اصلی چقدر عرض دارد، سایدبار چه نسبتی با ستون اصلی دارد. با گرید، این پاسخ‌ها از پیش تعیین شده‌اند.
طراح توجهش را صرف سلسله‌مراتب و محتوا میکند، نه اندازه‌گیری دوباره هر بلوک. کاربر توجهش را صرف پیام میکند، نه رمزگشایی ساختار. کل معامله همین است.
پنج نوع گرید، یک‌جا
بیشتر تیم‌ها «گرید» را یک تصمیم می‌دانند. پنج تصمیم است. هر کدام مسئله چیدمان متفاوتی را حل میکند و به دلیل متفاوتی شکست می‌خورد. اشتباه انتخاب کنید و صفحه تا ابد با شما می‌جنگد.
| نوع گرید | بهترین برای | حالت شکست | نمونه شاخص |
|---|---|---|---|
| ستونی | صفحات بازاریابی، قالب اپ، سایتهای محتوایی | تنها گرید لازم دانستنش | صفحه اصلی Stripe |
| ماژولار | داشبوردها، چیدمانهای editorial، رابط محصول متراکم | سلول‌هایی با اندازه‌های متغیر و بدون منطق | Bloomberg Terminal، صفحه اصلی NYT |
| خط پایه | خواندن طولانی، رابط محصول متن‌محور | فراموش کردن محاسبه line-height | Medium، Apple Newsroom |
| سلسله‌مراتبی | جلد editorial، بخش‌های hero، چیدمان مجله | پشت آن پنهان شدن به جای طراحی | صفحات محصول Apple، فیچرهای NYT |
| دست‌نوشته | مقاله‌های بلند، مستندات، خواندن تک‌ستونه | نادیده گرفتنش در موبایل و تحویل یک دیوار | مستندات Notion، Stripe Press |
این جدول همان نشانک است. بیشتر اختلاف‌ها بر سر چیدمان همان لحظه‌ای تمام میشود که تیم روی یکی از این پنج توافق کند.
گرید ستونی اسب بارکش است
گرید ستونی پیشفرض تقریباً هر چیزی است که در وب تحویل می‌دهید. ستونهای عمودی، گاتر ثابت، حاشیه‌های اختیاری. محتوا در ستون‌ها جاری میشود، بلوک‌های چیدمان یک یا چند ستون را میگیرند و ریتم با تعداد ستونهای بوم تعیین میشود.
Stripe روی کل سطح بازاریابی‌اش گرید ۱۲ ستونه اجرا میکند. قالب اپ Linear روی گرید ستونی ساخته شده که در موبایل به یک ریل می‌شکند و در دسکتاپ به سایدبار به‌اضافه ستون اصلی باز میشود. صفحات بازاریابی Vercel گرید ۱۲ ستونه را با فضای منفی حساب‌شده به کار می‌برند، ستون‌ها را اگر به ماتریس قیمت داشبورد یا چیدمان لاگ دیپلوی چشم بدوزید می‌بینید. همان گریدی که در ۱۹۶۱ پوستر اجرا می‌کرد در ۲۰۲۶ سایت بازاریابی اجرا میکند، فقط با مدیاکوئری زیرش.
گرید ستونی را فقط وقتی کنار بگذارید که چیدمان اساساً غیرمستطیلی باشد، که در وب تقریباً هرگز نیست. تحلیل استک سایت بازاریابی ۲۰۲۶ انتخاب‌های فریم‌ورکی را پوشش میدهد که روی این گرید می‌نشینند.
گرید ماژولار برای تراکم editorial است
گرید ماژولار بوم را در هر دو جهت، ستون و ردیف، به سلول تقسیم میکند. شبیه کاغذ شطرنجی است و مثل آن رفتار میکند. بلوکها به مرز سلولها میچسبند و تراکم به یک اهرم طراحی تبدیل میشود، نه یک تصادف.
صفحه اصلی نیویورک تایمز گرید ماژولار شاخص در وب است. تیترها، عکس‌ها، خلاصه‌ها و تبلیغات همه در سلول‌هایی با عرض و ارتفاع یکسان می‌نشینند، هرچند ترکیب‌بندی ظاهری متنوع به نظر می‌رسد. Bloomberg Terminal گرید ماژولار را به نهایتش می‌رساند، با تراکم اطلاعاتی که بدون انضباط سخت سلولی فرومی‌پاشید. نمای گالری Notion گرید ماژولار نرم‌تری دارد، با کارت‌هایی که به عرض ثابت سلول میچسبند و محتوا درونشان تطبیق می‌یابد.
وقتی صفحه واحدهای کوچک و قابلمقایسه زیادی دارد که باید مثل یک سیستم خوانده شوند، از گرید ماژولار استفاده کنید. وقتی محتوا یکی دو بلوک بزرگ است، رهایش کنید، چون گرید ستونی همان کار را با تشریفات کمتر میکند. گرید ماژولاری که دو کارت اجرا میکند، گرید ستونی‌ای است که لباس مبدل پوشیده.
گرید خط پایه موتور ریتم است
گرید خط پایه گریدی افقی است که ریتم عمودی را کنترل میکند. هر خط متن روی یک خط پایه می‌نشیند، هر عنوان روی مضربی از آن خط فرود می‌آید و صفحه با ضرباهنگی موزیکال و آرام خوانده میشود که کاربر حسش میکند اما هرگز اسمش را نمی‌برد.
صفحات بازاریابی Apple گرید خط پایه سختگیرانه‌ای اجرا میکنند. هر صفحه محصولی را باز کنید و ببینید عنوان، زیرعنوان، تصویر و متن چطور ریتم عمودی مشترکی دارند. Medium در قالب long-form خود هم‌ترازی خط پایه دارد، برای همین خواندن حتی در مقاله ۴۰۰۰ کلمه‌ای بی‌زحمت است. Stripe Press، بازوی انتشاراتی، روی هر صفحه‌ای که چاپ میکند و هر صفحه‌ای که در وب منتشر میکند ریتم خط پایه اجرا میکند.
ریاضی آن در وب ساده است. یک واحد پایه انتخاب کنید، معمولاً ۸ پیکسل. line-height متن را روی یک مضرب بگذارید، معمولاً ۲۴ پیکسل که ۱.۵ برابر متن ۱۶ پیکسلی است.
عنوان‌ها هم روی مضرب‌ها می‌نشینند، پس H1 با ۴۸ پیکسل و line-height برابر ۵۶ پیکسل هم به همان ریتم می‌چسبد. کل صفحه روی یک ضرب زمزمه میکند.
گرید سلسله‌مراتبی برای ترتیب خوانش است
گرید سلسله‌مراتبی گریدی سفارشی است که حول اولویت ذاتی محتوا ساخته میشود. به جای شروع از ستون و ردیف، از این شروع میکنید که چه چیزی اول، دوم و سوم خوانده شود. چیدمان به این تصمیم‌ها می‌چسبد، نه به یک قالب عمومی.
صفحات عرضه محصول Apple گریدهای سلسله‌مراتبی در طبیعت‌اند. عنصر hero فضای نامتناسب بزرگی می‌گیرد، محتوای ثانویه در خوشه‌های فشرده می‌نشیند و محتوای سوم در ستونی باریک‌تر نزدیک انتها زندگی میکند. فیچرهای بزرگ نیویورک تایمز، آن مطالب چندرسانه‌ای با اسکرول طولانی، گریدهای سلسله‌مراتبی‌اند که صحنه به صحنه طراحی شده‌اند. صفحه اصلی Anthropic گرید سلسله‌مراتبی‌ای اجرا میکند که یک جمله بر آن غالب است و بقیه چیز برای پشتیبانی اندازه گرفته شده.
گریدهای سلسله‌مراتبی نوعی‌اند که بیشترین قضاوت editorial را می‌طلبند. وقتی شکست می‌خورند که طراحان از آن‌ها بهانه‌ای برای فرار از انضباط گرید ستونی یا ماژولار بسازند. گرید سلسله‌مراتبی «بدون گرید» نیست. گریدی است که اولویت‌ها هندسه‌اش را تعیین میکنند.
اگر سلسله‌مراتب شما غلط است، گرید غلط است. منطق عمیق‌تر اولویت در طراحی سلسله‌مراتب بصری آمده است.
گرید دست‌نوشته برای متن بلند است
گرید دست‌نوشته یک ستون است. کل گرید همین است. یک بلوک متن که با حاشیه‌های سنجیده، measure حساب‌شده و بدون هیچ رقیب دیگری برای چشم، در صفحه پایین می‌رود.
کتاب‌های Stripe Press گریدهای دست‌نوشته روی کاغذند. صفحات مستندات Notion گریدهای دست‌نوشته در مرورگرند. حالت خواندن Substack، مطالب بلند Apple Newsroom، مطالب مجله نیویورک تایمز در حالت تک‌ستونه، همه همین گرید را اجرا میکنند. کتاب پنج قرن است می‌داند خواندن بلند را چطور تحویل دهد. وب وقتی رسید که دست از چسباندن سایدبار کنار مقاله ۴۰۰۰ کلمه‌ای برداشتیم.
محدودیت اصلی measure است، یعنی طول خط. ۶۵ تا ۷۵ کاراکتر را هدف بگیرید. پهن‌تر شود، چشم در بازگشت خط را گم میکند. باریک‌تر شود، ریتم بریده‌بریده میشود.
محدودیت دیگر حاشیه است. حاشیه‌های کناری سخاوتمند فضای هدررفته نیستند، قابی‌اند که چشم خواننده را آرام میکند. مدخل واژه‌نامه فضای خالی توضیح میدهد چرا این حاشیه‌ها کار واقعی میکنند.
سیستم ۱۲ ستونه وب مدرن را اداره میکند
گرید ۱۲ ستونه پیشفرض است چون ۱۲ بخشپذیرترین عدد کوچک است. تمیز به ۱، ۲، ۳، ۴، ۶ و ۱۲ تقسیم میشود. این تقریباً هر الگوی چیدمانی را که سایت بازاریابی یا رابط محصول نیاز دارد، بدون توسل به کسر پوشش میدهد.
Bootstrap در ۲۰۱۱ گرید ۱۲ ستونه را برای وب مدون کرد و هرگز لازم نشد بابت این انتخاب عذرخواهی کند. ابزارهای گرید Tailwind به‌طور پیشفرض ۱۲ ستون دارند. گرید واکنش‌گرا در Material Design، گرید Carbon Design و Polaris از Shopify، همه ۱۲ ستونه‌اند. این انتخاب تصادفی نیست، ریاضی است.
این راهنمای میدانی ۱۲ ستونه است که بیشتر تیم‌ها یا از آن استفاده میکنند یا بد دوباره اختراعش میکنند:
- 12 هیرو تمامعرض، بنر، فوتر، محتوای لبه‌به‌لبه
- 8 + 4 محتوای اصلی با سایدبار، قالب اپ محصول شاخص
- 6 + 6 بلوک‌های محتوای دوتایی، ردیف‌های فیچر بازاریابی، بخش‌های مقایسه
- 4 + 4 + 4 کارت‌های سه‌تایی، سطوح قیمت، گریدهای فیچر سه‌ستونه
- 3 + 3 + 3 + 3 لوگوهای چهارتایی، گرید تیم، گالری تصویر
- 9 + 3 محتوا با ستون متای باریک، رایج در چیدمانهای editorial
- 2 + 8 + 2 محتوای وسط‌چین با فضای تنفس، در صفحات جزئیات بازاریابی
این الگوها را زود قفل کنید و تیم دیگر در بازبینی‌های طراحی بر سر چیدمان بحث نمی‌کند. الگو spanها را انتخاب میکند، spanها ریاضی را و ریاضی صفحه را تحویل میدهد. استدلال به سیستم طراحی نیاز ندارید تا حدی همین است که یک گرید محکم بیشتر کاری را میکند که سیستم طراحی مدعی انجامش است.
ریتم خط پایه روی صفحه‌نمایش، نه فقط روی کاغذ
هم‌ترازی خط پایه بخشی از نظریه گرید است که بیشتر تیم‌ها در وب از آن می‌گذرند چون مرورگر آن را اجبار نمی‌کند. از آن بگذرید و صفحه به دلایلی که کاربر نمی‌تواند اسم ببرد لرزان حس میشود. نگهش دارید و صفحه مثل یک محصول تمام‌شده حس میشود.
ترفند این است که با واحد عمودی فکر کنید، نه پیکسل. پایه ۸ پیکسلی انتخاب کنید. همه padding، margin، line-height و ارتفاع کامپوننت‌ها مضرب ۸ می‌شوند.
متن ۱۶ پیکسلی با line-height برابر ۲۴ پیکسل به ریتم می‌چسبد. H1 با ۴۸ پیکسل و line-height برابر ۵۶ می‌چسبد. padding کارت ۲۴ پیکسل می‌چسبد. فاصله بخش‌ها ۹۶ پیکسل می‌چسبد. کل صفحه به سازی تبدیل میشود که روی یک نت کوک شده و چشم می‌تواند بی‌هیچ گیری در آن حرکت کند.
Linear ریتم خط پایه را در فهرست issueها اجرا میکند. Notion در خواننده مستندات. محصول Slides در Figma ریتم را هم در بندانگشتی اسلایدها و هم در بوم ویرایشگر نگه می‌دارد. تیم‌هایی که ریتم را نگه می‌دارند معمولاً همان‌هایی‌اند که تایپ را سیستم می‌دانند، نه override استایل‌شیت.
گریدهای واکنش‌گرا بدون هول‌شدن
گرید واکنش‌گرا همان گرید است که در عرض‌های مختلف اجرا میشود. در هر breakpoint طراحی متفاوتی نیست، همان ترکیب‌بندی است که با کوچک‌شدن viewport هوشمندانه جمع میشود.
رویکرد استاندارد گرید ۱۲ ستونه در دسکتاپ، ۸ ستونه در تبلت و ۴ ستونه در موبایل است. چیدمان 4 + 8 در دسکتاپ در تبلت 4 + 4 و در موبایل تک‌ستونه میشود. چیدمان چهارتایی 3 + 3 + 3 + 3 در تبلت 4 + 4 (دو ردیف دوتایی) و در موبایل 4 + 4 + 4 + 4 (چهار تا روی هم) میشود. ریاضی یکدست است چون تعداد ستون‌ها با کسرهای تمیز کم میشود.
سایت Stripe گرید واکنش‌گرای درسنامه‌ای در تولید است. صفحات بازاریابی Linear از سه breakpoint عبور میکنند بی‌آنکه یک چیدمان فشرده حس شود. ماتریس قیمت Vercel با تبدیل مقایسه کنار هم به آکاردئون عمودی بازچینی میشود، همان ترفند واکنش‌گرایی که بیشتر تیم‌ها هرگز نمی‌فهمند: «واکنش‌گرا» گاهی یعنی «کامپوننت را عوض کن، نه ستون‌ها را». مسئله صفحه قیمت این تصمیم را با جزئیات پوشش میدهد.
اشتباه این است که موبایل و دسکتاپ را دو چیدمان بی‌ربط طراحی کنید. ترکیب‌بندی‌ها واگرا می‌شوند، برند در گوشی و لپ‌تاپ متفاوت خوانده میشود و تیم در نهایت دو محصول را نگهداری میکند. اول گرید را طراحی کنید، بعد breakpointها را به‌عنوان جمع‌شدن همان گرید. مدخل واژه‌نامه بخش هیرو بخشی از گرید را که کاربران اول می‌بینند در همه breakpointها پوشش میدهد.
عصر CSS Grid: ابزارهای هم‌تراز چاپ بالاخره رسیدند
CSS Grid اولین باری است که مرورگر یک پریمیتیو چیدمان دارد که با کاری که طراحان چاپ در ۱۹۶۱ می‌کردند برابری میکند. پیش از CSS Grid، طراحان وب فلوت و Flexbox و صبر فراوان داشتند. حالا خطوط واقعی گرید، ناحیه‌های نام‌دار، کنترل gap و توانایی چیدن صفحه به شیوه‌ای داریم که مولر-براکمان یک پوستر را می‌چید.
این تغییر مهم است چون چیزی که قبلاً تصمیم زمان ساخت بود (از گرید کدام فریمورک استفاده کنم) حالا پریمیتیو چیدمان داخل مرورگر است. display: grid به‌اضافه grid-template-columns: repeat(12, 1fr) به‌اضافه gap: 24px یک گرید ۱۲ ستونه است. بدون فریمورک. بدون کلاس‌های utility. فقط CSS که کاری را میکند که باید یک دهه پیش می‌کرد.
ابزارهای گرید Tailwind حالا شکر نازکی روی CSS Gridاند. گرید Bootstrap بیشتر یک لایه سازگاری برای مشکلی است که دیگر وجود ندارد. تیم‌هایی که بیشترین بهره را از CSS Grid می‌برند آن را ابزار طراحی می‌دانند، نه جایگزین Flexbox.
ویرایشگر Linear برای چیدمان پنل issue از CSS Grid استفاده میکند. ویرایشگر وب Figma برای chrome بوم. Vercel در بیشتر سایت بازاریابی. ابزار در جعبه هست، سوال این است که سیستم طراحی از آن استفاده میکند یا الگوهای ۲۰۱۸ را روی زیرساخت ۲۰۲۶ اجرا میکند.
گریدهای واقعی محصولات که ارزش مطالعه دارند
سریع‌ترین راه درونی‌کردن سیستم‌های گرید بازرسی محصولاتی است که آن را خوب تحویل می‌دهند. پنج مورد که نگاه طولانی می‌ارزند.
Linear گرید ستونی فشرده در قالب اپ، گرید ۱۲ ستونه در سایت بازاریابی و ریتم خط پایه در هر دو اجرا میکند. فهرست issue، نمای پروژه، پنل مستندات، همه به همان گرید عمودی و افقی میچسبند. تمیزترین پیاده‌سازی گرید ستونی در رابط محصول امروز است.
Vercel گرید ۱۲ ستونه با فضای منفی عمدی اجرا میکند. صفحات بازاریابی نفس می‌کشند، داشبورد گرید ماژولار متراکم‌تری اجرا میکند و نمای دیپلوی، که در حالت بارگذاری همان محصول است آمده، گرید سلسله‌مراتبی دارد که در آن لاگ بیلد غالب است و بقیه جا را برایش باز میکنند.
Stripe گرید ۱۲ ستونه شاخص در سطح بازاریابی و گرید ماژولار در داشبورد است. کارت‌های داشبورد به عرض‌های یکسان میچسبند، بلوک‌های متریک ارتفاع مشترک دارند و کل محصول در بیش از سی صفحه مثل یک ترکیب‌بندی خوانده میشود. تحلیل ضد-داشبورد فلسفه‌ای را پوشش میدهد که این گرید پیاده میکند.
Apple گریدهای سلسله‌مراتبی در صفحات محصول، ریتم خط پایه در همه‌جا و گرید ماژولار در App Store و Newsroom تحویل میدهد. انضباط گرید Apple نزدیک‌ترین چیز در وب به چاپ مکتب سوئیسی است و بیشتر تیم‌های محصول دست‌کم میگیرند که چقدر از تاثیر برند فقط از گرید می‌آید.
گریدهای editorial: NYT، Figma و Anthropic
نیویورک تایمز گرید ماژولار در صفحه اصلی، گرید سلسله‌مراتبی در فیچرهای بزرگ و گرید دست‌نوشته در مطالب بلند اجرا میکند. همان نشریه عمداً از سه گرید استفاده میکند و بر اساس وظیفه editorial بینشان جابه‌جا میشود. درس همین است: نوع گرید تصمیم طراحی هر سطح است، نه تنظیم سراسری.
Figma گرید ستونی در مرورگر فایل، گرید ماژولار در کتابخانه تیم و گرید سفارشی درون خود بوم اجرا میکند. Notion گرید دست‌نوشته برای مستندات و گرید ماژولار برای پایگاه‌داده‌ها دارد. Loops و Resend، دو محصول جدیدتر، گریدهای بازاریابی ۱۲ ستونه تمیز و گریدهای ستونی فشرده‌تر در اپ دارند. سایت Anthropic گرید سلسله‌مراتبی دارد که در هر بخش یک جمله غالب است، بیشتر از رابط محصول از چیدمانهای editorial الگو گرفته. نوشته آنبوردینگ بدون آنبوردینگ نشان میدهد انضباط گرید چطور به جریان‌های اولین اجرا هم می‌رسد، جریان‌هایی که اغلب چیدمان یک‌بارمصرف فرض می‌شوند.
چه وقت گرید را بشکنیم (عمداً)
شکستن گرید فقط وقتی جواب میدهد که گرید آن‌قدر پیدا باشد که شکستن مثل انتخابی آگاهانه خوانده شود. بدون گرید پشت شکستن، عنصر شکسته فقط چیزی ناهم‌تراز روی صفحه است.
صفحه محصول Apple که اجازه میدهد تصویر hero از حاشیه بیرون بزند، گریدی را می‌شکند که در همه جای دیگر محکم نگه داشته شده. فیچر NYT که عکسی وسط مقاله به تمام‌صفحه منفجر میشود، گریدی را می‌شکند که بالا و پایش ماژول‌های منضبط اجرا میکند. صفحه اصلی Anthropic گاهی اجازه میدهد یک نقل‌قول خارج از محور و با دو برابر اندازه انتظار بنشیند و این حرکت جواب میدهد چون همه چیز اطرافش جمع‌وجور است.
قاعده یک شکست در هر سطح است. دو شکست یعنی بدون گرید. شکست باید به‌یادماندنی‌ترین لحظه صفحه باشد. اگر نمی‌توانید به گریدی که عنصر می‌شکند اشاره کنید، گرید نمی‌شکنید، یک چیدمان بی‌ساختار را تزئین میکنید. مدخل واژه‌نامه ویرفریم تصمیم مراحل اولیه را پوشش میدهد که به کدام گرید متعهد می‌شوید.
انضباط پنل تنظیمات در مسئله صفحه تنظیمات درسی مرتبط است. صفحات تنظیمات جایی‌اند که انضباط گرید فرو می‌ریزد، چون هر تنظیم آن‌قدر متفاوت حس میشود که لایق چیدمان متفاوتی باشد. نیست. گرید را نگه دارید و بگذارید محتوا درونش تغییر کند.
گرید همان برند است، حتی وقتی کسی به آن اشاره نمی‌کند
اگر رنگ‌ها، تایپ و تصویرسازی هر محصولی که در این مقاله آمد را بردارید، گریدها هنوز قابل‌تشخیص می‌ماندند. گرید Linear هنوز شبیه Linear حس می‌شد. گرید Stripe هنوز شبیه Stripe. گرید عمیق‌ترین artifact برند است که محصول تحویل میدهد، چون همان چیزی است که کاربر بی‌آنکه آگاهانه ببیند حس میکند.
یک نوع گرید انتخاب کنید، یک تعداد ستون، یک واحد خط پایه. یک سال در همه سطح‌ها نگهشان دارید و برند از ساختار شروع به ظهور میکند، نه از پرداخت سطحی. این همان راز کامل است که مکتب سوئیسی آموخت و بیشتر تیم‌های محصول مدام دوباره یاد میگیرند. گرید کار را میکند. بقیه تزئینی است که موفقیت یا شکستش به این بستگی دارد که گرید برای نگه‌داشتنش آنجا بود یا نه.
FAQ
تفاوت گرید ستونی و گرید ماژولار چیست؟
گرید ستونی بوم را فقط به ستونهای عمودی تقسیم میکند، پس بلوکها یک یا چند ستون را میگیرند و ریتم افقی است. گرید ماژولار بوم را در هر دو جهت، ستون و ردیف، به سلول تقسیم میکند، پس بلوکها به سلولها میچسبند و تراکم ویژگی طراحیشده میشود. گریدهای ستونی سایتهای بازاریابی و بیشتر قالبهای اپ را اداره میکنند. گریدهای ماژولار داشبوردها، چیدمانهای editorial و هر رابطی را که واحدهای کوچک قابلمقایسه زیادی باید در آن مثل یک سیستم خوانده شوند.
چرا گرید ۱۲ ستونه استاندارد است؟
۱۲ بخشپذیرترین عدد کوچک است. تمیز به ۱، ۲، ۳، ۴، ۶ و ۱۲ تقسیم میشود که تقریباً هر الگوی چیدمان (تمامعرض، نصفها، یکسومها، یکچهارمها، یکششمها) را بدون کسر پوشش میدهد. Bootstrap آن را در ۲۰۱۱ مدون کرد، Tailwind آن را پیشفرض میگذارد و هر سیستم طراحی بزرگ بعدش همین انتخاب را تکرار کرده چون ریاضی همان ریاضی است.
با وجود CSS Grid هنوز به فریمورک CSS نیاز دارم؟
برای چیدمان، نه. display: grid با grid-template-columns: repeat(12, 1fr) و gap یک گرید ۱۲ ستونه در سه خط CSS است. فریمورکهایی مثل Bootstrap و Tailwind از طریق قراردادهای کامپوننت، میانبر utility و یکدستی در سطح تیم ارزش اضافه میکنند، اما خود پریمیتیو چیدمان حالا قابلیت مرورگر است. اگر تیمتان را سریعتر میکند از فریمورک استفاده کنید. فقط به این دلیل که فکر میکنید برای گرید لازمش دارید استفاده نکنید.
FAQ: تحویل و شکستن گرید
چطور ریتم خط پایه را در محصول واقعی نگه دارم؟
یک واحد پایه انتخاب کنید، معمولاً ۸ پیکسل. هر padding، margin، line-height و ابعاد کامپوننت را مضرب آن واحد کنید. متن ۱۶ پیکسلی با line-height برابر ۲۴ پیکسل.
عنوان‌ها ۳۲، ۴۰، ۴۸ یا ۵۶ با line-heightهای ۴۰، ۴۸، ۵۶ یا ۶۴. فاصله بخش‌ها ۹۶ یا ۱۲۸. این انضباط خسته‌کننده است، نتیجه‌اش صفحه‌ای است که مثل محصول تمام‌شده خوانده میشود، نه پیش‌نویس.
چه وقت گرید را بشکنم؟
یک بار برای هر سطح، وقتی گرید آن‌قدر پیدا باشد که شکست عمدی خوانده شود. شکست باید به‌یادماندنی‌ترین لحظه صفحه باشد. اگر نمی‌توانید به گریدی که عنصر می‌شکند اشاره کنید، صفحه هنوز گرید ندارد، چیدمان دارد. اول گرید را درست کنید، بعد بشکنیدش.
CTA
اگر تیمی می‌خواهید که سیستم‌های گرید را ستون فقرات محصول طراحی کند، نه فکر دقیقه‌نودی قبل از لانچ، Brainy را استخدام کنید. ما محصولاتی تحویل می‌دهیم که گرید کار را میکند، برند با یک نگاه خوانده میشود و ریتم در همه سطح‌ها می‌ماند. مولر-براکمان تأیید می‌کرد. کاربران شما هم، حتی اگر هرگز ندانند به کدام گرید نگاه میکنند.
Want a product where the grid does the work and the brand reads at a glance? Brainy designs grid systems as part of the product, not the after-thought before launch.
Get Started
