منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۴ دقیقه

سیستم شبکه‌ای (Grid System) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

یک تمرین کوچک: صفحهٔ اصلی هر فروشگاه اینترنتی بزرگی را باز کنید و به‌جای نگاه‌کردن به محصول‌ها، به لبه‌ها نگاه کنید. لبهٔ چپ عکس‌ها، لبهٔ راست قیمت‌ها، جایی که عنوان‌ها شروع می‌شوند. تقریباً همه‌شان روی چند خط فرضی مشترک می‌ایستند. آن خط‌های فرضی را کسی طراحی نکرده که دیده شوند؛ طراحی شده‌اند که چیزهای دیگر بتوانند روی‌شان بایستند.

آن مجموعه خط‌های فرضی، سیستم شبکه‌ای است. و برخلاف تصور رایج، شبکه یک «راهنمای بصری» برای مرتب‌کردن ظاهر نیست؛ یک سیستم تصمیم‌گیری دربارهٔ فضا است. تفاوت این دو برداشت را وقتی می‌فهمید که محصولتان از ده صفحه به دویست صفحه می‌رسد و ناگهان معلوم می‌شود هیچ‌کس نمی‌داند فاصلهٔ استاندارد بین دو کارت چقدر است.

در این مقاله اجزای شبکه، ریشهٔ تاریخی‌اش و هفت گونهٔ اصلی‌اش را می‌بینیم، و در پایان دو بحثی را اضافه می‌کنیم که منبع اصلی سراغشان نرفته است: شبکه در راست‌به‌چپ، و جایی که شبکه شکست می‌خورد.

سیستم شبکه‌ای چیست؟

سیستم شبکه‌ای مجموعه‌ای از خطوط راهنمای نامرئی است که تعیین می‌کند عناصر طراحی مجاز به نشستن در کجا هستند. کارش محدودکردن انتخاب است — و همین محدودیت، فایده‌اش است. وقتی شبکه دارید، پرسش «این کارت را چند پیکسل از لبه فاصله بدهم؟» دیگر پرسش نیست؛ جوابش از قبل گرفته شده و شما سراغ پرسش‌های مهم‌تر می‌روید.

سه فایدهٔ عملی که شبکه به یک تیم می‌دهد:

• - یکدستی بدون هماهنگی: دو طراح که هرگز با هم حرف نزده‌اند، اگر روی یک شبکه کار کنند، خروجی‌شان کنار هم می‌نشیند. این تنها راه مقیاس‌دادن به کار طراحی است.
• - سرعت تصمیم: شبکه تعداد گزینه‌های ممکن را از بی‌نهایت به چند حالت کم می‌کند. طراحی سریع‌تر می‌شود چون تصمیم‌های کمتری باقی مانده است.
• - ترجمه‌پذیری به کد: شبکه زبان مشترک طراح و برنامه‌نویس است. «سه ستون با ناودان ۲۴ پیکسل» جمله‌ای است که هر دو طرف یک چیز از آن می‌فهمند — چیزی که «یک‌کم بیشتر فاصله بده» هرگز نیست.

و یک نکتهٔ منفی که کمتر گفته می‌شود: شبکه خلاقیت را محدود می‌کند، و این عیب آن نیست. شبکه دقیقاً برای همین ساخته شده. جایی که محدودیت به مانع تبدیل می‌شود، بحثی است که در بخش آخر به آن می‌رسیم.

آناتومی شبکه: پنج واژه که یکی نیستند

بیشتر بحث‌های بی‌نتیجه دربارهٔ چیدمان، از قاطی‌شدن پنج واژه شروع می‌شود:

• - ستون (Column): ناحیه‌ای که محتوا اجازه دارد در آن بنشیند. تعداد ستون‌ها همان چیزی است که تیم‌ها بیشترین وقت را سرش می‌گذارند و کمترین اثر را از آن می‌گیرند.
• - ناودان (Gutter): فاصلهٔ میان دو ستون. قاعدهٔ آهنین‌اش این است که ناودان هرگز محتوا نمی‌گیرد؛ اگر چیزی داخل ناودان نشست، یعنی شبکه‌تان یک ستون کم دارد.
• - حاشیه (Margin): فاصلهٔ محتوا تا لبهٔ صفحه. حاشیه به صفحه تعلق دارد نه به شبکه؛ به همین دلیل است که در موبایل حاشیه را کم می‌کنید بی‌آنکه ستون‌ها را دست بزنید.
• - ماژول (Module): حاصل برخورد یک ستون با یک ردیف. ماژول واحدی است که عملاً پُرش می‌کنید — و در محصولات دیجیتال، معمولاً همان چیزی است که به آن «کارت» می‌گویید.
• - خط پایه (Baseline): ریتم افقی‌ای که هر سطر متن روی آن می‌نشیند. خط پایه تنها جزء شبکه است که به تایپوگرافی گره خورده، نه به چیدمان.

اثر واقعی این پنج‌تا یکسان نیست. تعداد ستون را می‌شود عوض کرد و کسی متوجه نمی‌شود؛ اما اگر ناودان یک محصول را از ۲۴ به ۲۰ پیکسل تغییر دهید، حس همهٔ صفحه‌ها عوض می‌شود بدون آنکه حتی یک عنصر جابه‌جا شده باشد. فضا، خودش یک عنصر طراحی است — همان چیزی که در سلسله‌مراتب بصری دیدیم گروه‌بندی را می‌سازد.

از زوریخ تا مرورگر: تاریخ کوتاه شبکه

شبکه اختراع وب نیست؛ ارث گرافیک چاپی است. در دههٔ ۱۹۵۰ و ۱۹۶۰ گروهی از طراحان سوئیسی — Josef Müller-Brockmann، Karl Gerstner و Emil Ruder — چیزی را بنا گذاشتند که بعدها «سبک بین‌المللی تایپوگرافی» نام گرفت. ایدهٔ مرکزی‌شان این بود که چیدمان باید نظام‌مند باشد نه سلیقه‌ای: طراح یک ساختار می‌سازد و بعد محتوا را در آن ساختار توزیع می‌کند.

این نگاه در ظاهر خشک است اما نتیجه‌اش آزادی بیشتر بود. وقتی ساختار از قبل حل شده باشد، انرژی طراح آزاد می‌شود برای تصمیم‌هایی که واقعاً به قضاوت نیاز دارند. Massimo Vignelli، طراح ایتالیایی، همین را با تشبیهی گفته که هنوز بهترین توصیف شبکه است: به‌گفتهٔ او شبکه «لباس زیرِ کتاب» است — می‌پوشیدش، اما قرار نیست دیده شود.

وقتی طراحی به مرورگر رسید، شبکه هم آمد، اما با یک تفاوت بنیادی: در چاپ، اندازهٔ صفحه معلوم است. در وب معلوم نیست. کل داستان شبکهٔ واکنش‌گرا تلاشی است برای پاسخ به همین یک تفاوت — و به همین دلیل است که چهار گونهٔ اول شبکه در فهرست بعدی بوی کاغذ می‌دهند و سه گونهٔ آخر بوی صفحه.

هفت گونهٔ شبکه و پرسشی که هرکدام جواب می‌دهند

این هفت‌تا رقیب هم نیستند؛ هر کدام پرسش متفاوتی را جواب می‌دهند. مفیدترین راه یادگرفتنشان، به‌خاطر سپردن آن پرسش است نه شکل شبکه:

• - ۱. قاعدهٔ یک‌سوم: کادر را با دو خط افقی و دو خط عمودی به نُه بخش تقسیم می‌کند و عنصر مهم را روی نقاط تلاقی می‌نشاند. پرسشی که جواب می‌دهد: «سوژه کجای کادر بایستد؟» ابزار عکاسی و سینماست، و برای شما وقتی به کار می‌آید که تصویر شاخص یک صفحه را می‌بُرید.
• - ۲. تقسیم طلایی: نسبت ۱ : ۱٫۶۱۸؛ رابطه‌ای که در آن، نسبت جزء کوچک به بزرگ برابر است با نسبت بزرگ به مجموع. پرسشش: «چه نسبتی طبیعی به نظر می‌رسد؟» بیش از دو هزار سال در معماری و هنر استفاده شده، اما در رابط دیجیتال بیشتر یک نقطهٔ شروع الهام‌بخش است تا قاعده‌ای که بشود به آن استناد کرد.
• - ۳. شبکهٔ یک‌ستونی: یک ستون متن با حاشیه‌های دورش. پرسشش: «چطور سر راه خواندن پیوسته قرار نگیرم؟» سادگی‌اش فریب‌دهنده است: بلاگ‌ها، مستندات و همین صفحه‌ای که می‌خوانید یک‌ستونی‌اند، و تمام کیفیتشان در تنظیم درست عرض سطر و حاشیه خلاصه می‌شود.
• - ۴. شبکهٔ چندستونی: چند ستون که محتوا می‌تواند یکی یا چندتایشان را بگیرد. پرسشش: «چطور متن، تصویر و توضیح تصویر را در یک صفحه کنار هم بگذارم؟» انعطافش زیاد است و همین انعطاف، بی‌نظمی را هم ممکن می‌کند.
• - ۵. شبکهٔ ماژولار: ستون‌های عمودی به‌علاوهٔ ردیف‌های افقی، که با هم شبکه‌ای از ماژول می‌سازند. پرسشش: «چطور دویست صفحه هم‌چنان یک محصول به نظر برسند؟» این همان شبکه‌ای است که کار محصول واقعاً روی آن می‌چرخد و پایهٔ هر سیستم طراحی است.
• - ۶. شبکهٔ خط پایه: خطوط افقی هم‌فاصله در کل سند که متن روی آن‌ها می‌نشیند. پرسشش: «چرا دو ستون کنار هم با هم جور درنمی‌آیند؟» راه‌حلش حساب ساده است: اندازهٔ قلم و فاصلهٔ سطر را طوری انتخاب کنید که مضرب هم باشند — مثلاً قلم ۱۶ با فاصلهٔ سطر ۲۴ روی شبکهٔ ۸ می‌نشیند، ولی فاصلهٔ خودکار روی هیچ شبکه‌ای نمی‌نشیند.
• - ۷. شبکهٔ واکنش‌گرا: شبکه‌ای که با اندازه و جهت صفحه‌نمایش تغییر می‌کند. پرسشش: «این چیدمان در عرض ۳۷۵ پیکسل قرار است چه شکلی شود؟» بخش بعدی کاملاً به همین اختصاص دارد.

نکتهٔ عملی: در کار محصول، شما معمولاً هم‌زمان از سه‌تای این‌ها استفاده می‌کنید — واکنش‌گرا برای قالب کلی، ماژولار برای چیدمان صفحه، و خط پایه برای متن. انتخاب شبکه یعنی نام‌بردن پرسشی که دارید، نه کپی‌کردن شبکهٔ پروژهٔ قبلی.

شبکه در وب: از دوازده ستون تا نقطه‌های شکست

شبکهٔ واکنش‌گرا از سه جزء ساخته می‌شود که پیش‌تر دیدیم — ستون، ناودان، حاشیه — اما یک مفهوم چهارم هم دارد: نقطهٔ شکست (breakpoint). نقطهٔ شکست، عرضی است که در آن چیدمان به شکل دیگری تبدیل می‌شود؛ مثلاً سه ستون به یک ستون.

چند تصمیم که در عمل زیاد پیش می‌آید:

• - چرا دوازده ستون؟ چون ۱۲ بر ۲، ۳، ۴ و ۶ بخش‌پذیر است، پس با یک شبکه می‌توانید چیدمان دوتایی، سه‌تایی و چهارتایی بسازید. این یک پیش‌فرض خوب است، نه یک قانون طبیعت.
• - سیّال یا ثابت؟ در موبایل و تبلت معمولاً ستون‌ها سیّال‌اند (درصدی از عرض) تا فضا هدر نرود؛ در دسکتاپ معمولاً کل شبکه در عرض ثابتی وسط‌چین می‌شود، چون سطر متن روی نمایشگر ۲۷ اینچی بی‌نهایت کشیده می‌شود و خواندنش سخت.
• - نقطهٔ شکست را از کجا انتخاب کنیم؟ از محتوا، نه از فهرست اندازهٔ گوشی‌ها. آنجا که چیدمان زشت می‌شود، همان‌جا نقطهٔ شکست شماست. فهرست دستگاه‌ها هر سال عوض می‌شود؛ نقطهٔ شکستِ برخاسته از محتوا نه.
• - شبکه و فاصله یکی نیستند: شبکه می‌گوید ستون‌ها کجایند؛ مقیاس فاصله (مثلاً مضارب ۸) می‌گوید داخل هر ماژول چقدر فضا بگذارید. تیم‌هایی که فقط شبکه دارند و مقیاس فاصله ندارند، هنوز صفحه‌های ناهمگون تولید می‌کنند.

ابزار امروزی این کار را ساده‌تر کرده است: با CSS Grid می‌شود شبکه را همان‌طور که در فیگما کشیده‌اید مستقیم اعلام کرد، و با container queries می‌شود چیدمان یک کامپوننت را به عرض ظرف خودش وابسته کرد نه عرض کل صفحه. این تغییر کوچکی به نظر می‌رسد ولی مهم است: کارتی که در نوار کناری و در متن اصلی هر دو استفاده می‌شود، دیگر لازم نیست دو نسخه داشته باشد. برای بحث مفصل‌تر دربارهٔ خود واکنش‌گرایی، طراحی واکنش‌گرا را ببینید.

شبکه در چیدمان راست‌به‌چپ

این بخش افزودهٔ مترجم است، چون منابع انگلیسی طراحی تقریباً هیچ‌وقت سراغش نمی‌روند و برای ما دقیقاً همان‌جایی است که کار خراب می‌شود.

خبر خوب: قرینه‌کردن خودِ شبکه ارزان است. ستون شمارهٔ یک از لبهٔ راست شروع می‌شود و بقیه پشت سرش می‌آیند؛ تمام. اگر در CSS به‌جای margin-left از margin-inline-start و به‌جای padding-right از padding-inline-end استفاده کنید، کل شبکه به‌محض عوض‌شدن جهت سند خودش قرینه می‌شود، بی‌آنکه یک خط CSS اضافه بنویسید.

خبر بد: بعضی چیزها که روی شبکه ایستاده‌اند نباید قرینه شوند، و اینجاست که خطاها متولد می‌شوند:

• - اعداد و تاریخ و شمارهٔ تلفن در دل متن فارسی هم‌چنان چپ‌به‌راست خوانده می‌شوند. شمارهٔ کارت بانکی که قرینه شده باشد، نه‌فقط زشت است، غلط است.
• - نام‌های لاتین، قطعه‌کد، مسیر فایل و نشانی اینترنتی جهت خودشان را دارند. به همین دلیل است که در همین صفحه هر واژهٔ لاتین در یک قطعهٔ جداگانه پیچیده شده.
• - نوار پیشرفت رسانه و کنترل‌های زمان‌محور معمولاً قرینه نمی‌شوند، چون کاربر گذر زمان را از چپ به راست تصور می‌کند حتی وقتی متن را از راست می‌خواند.
• - آیکون‌های جهت‌دار باید قرینه شوند و آیکون‌های غیرجهت‌دار نباید. فلشِ «بعدی» قرینه می‌شود؛ ساعت، تیک و ذره‌بین نه. این تفکیک، همان بحث معنای قراردادی آیکون است که در آیکون‌نگاری مفصل‌تر آمد.

و یک مسئلهٔ جدی‌تر که کمتر دیده می‌شود: خط پایه. قلم‌های فارسی به‌خاطر کشیدگی حروف و نقطه‌های زیر و بالای خط، به فاصلهٔ سطر بیشتری از قلم‌های لاتین نیاز دارند. شبکهٔ خط پایه‌ای که روی متن انگلیسی تنظیم شده باشد، به‌محض رسیدن متن فارسی به‌هم می‌ریزد — سطرها یا می‌چسبند یا ریتم را از دست می‌دهند. راه‌حل عملی این است که ریتم عمودی را از ابتدا با قلم فارسی نهایی تنظیم کنید، نه اینکه بعد از ترجمه بخواهید درستش کنید. طول متن هم عوض می‌شود: ترجمهٔ فارسی معمولاً از انگلیسی بلندتر درمی‌آید، پس ستون‌ها باید کمی جای اضافه داشته باشند. برای بحث تفصیلی قلم و ریتم، تایپوگرافی را ببینید.

کجا شبکه شکست می‌خورد؟

این بخش هم افزودهٔ مترجم است. منبع اصلی شبکه را «ابزاری مفید و نه دست‌وپاگیر» توصیف می‌کند و همان‌جا رهایش می‌کند؛ اما در عمل شبکه‌ها به چند شکل مشخص شکست می‌خورند:

• - ۱. رفلکس دوازده ستون: دوازده ستون پیش‌فرض خوبی است، ولی محتوایی که پنج آیتم هم‌ارز دارد، با قالب دوازده‌ستونی می‌جنگد. شبکه را از محتوا دربیاورید، نه از عادت.
• - ۲. پیروزی ستون بر عرض سطر: سه ستون روی صفحهٔ باریک، سطرهایی به‌طول سی‌وپنج نویسه می‌سازد که کسی نمی‌خواندشان. عرض سطر بر تعداد ستون اولویت دارد؛ شبکه در خدمت متن است نه برعکس.
• - ۳. شبکه به‌عنوان بهانه: خطرناک‌ترین حالت، وقتی است که «روی شبکه هست» جواب پرسش «آیا خوانا هست؟» می‌شود. هم‌ترازی نشانهٔ دقت است، هرگز دلیل درست‌بودن چیدمان نیست.
• - ۴. محتوایی که جا نمی‌شود: جدول‌های عریض، خط زمانی و نقشه لازم است از ستون بیرون بزنند؛ اجازه‌اش را از قبل در سیستم پیش‌بینی کنید تا هر بار به یک استثنای دستی تبدیل نشود.

و شکستن عمدی شبکه؟ کاملاً مجاز است، با یک شرط: شکستن فقط تا وقتی «تأکید» خوانده می‌شود که همه‌چیزِ دور آن هم‌چنان به شبکه وفادار باشد. یک عنصر که از ستون‌ها عبور می‌کند، برجسته می‌شود؛ اگر در یک صفحه دو بار این کار را بکنید، دیگر شبکه‌ای ندارید که بشکنید — فقط بی‌نظمی دارید. ضمناً حواستان به دسترس‌پذیری باشد: ترتیب بصری روی شبکه و ترتیب خواندن در کد باید یکی بمانند، وگرنه کاربر صفحه‌خوان صفحه را به‌ترتیبی می‌شنود که هیچ ربطی به آنچه شما چیده‌اید ندارد.

آزمون سرانگشتی پیش از هر هم‌تراز‌کردن: «این هم‌ترازی به چه کسی کمک می‌کند؟» اگر جواب «به هیچ‌کس، ولی مرتب‌تر است» بود، احتمالاً دارید شبکه را به‌جای خواننده راضی می‌کنید.

جمع‌بندی

• - سیستم شبکه‌ای مجموعه‌ای از خطوط نامرئی است که تعیین می‌کند محتوا کجا مجاز به نشستن است؛ یک سیستم تصمیم‌گیری دربارهٔ فضا، نه تزئین بصری.
• - پنج واژه‌اش را قاطی نکنید: ستون، ناودان، حاشیه، ماژول و خط پایه. ناودان و حاشیه بیشتر از تعداد ستون‌ها روی حس نهایی صفحه اثر می‌گذارند.
• - ریشه‌اش سبک سوئیسی دههٔ ۱۹۵۰ و ۱۹۶۰ است، با این ایده که ساختار باید نظام‌مند باشد تا انرژی طراح برای تصمیم‌های واقعی آزاد شود.
• - هفت گونه دارد که رقیب هم نیستند؛ هرکدام پرسش دیگری را جواب می‌دهند. کار محصول معمولاً هم‌زمان از واکنش‌گرا، ماژولار و خط پایه استفاده می‌کند.
• - در وب، نقطهٔ شکست را از محتوا بگیرید نه از فهرست گوشی‌ها؛ و شبکه را با مقیاس فاصله کامل کنید، وگرنه هنوز صفحه‌های ناهمگون خواهید داشت.
• - در راست‌به‌چپ، خود شبکه با ویژگی‌های منطقی CSS تقریباً مجانی قرینه می‌شود؛ چیزی که قرینه نمی‌شود اعداد، نام‌های لاتین و کنترل‌های زمان‌محور است — و ریتم عمودی را باید از ابتدا با قلم فارسی تنظیم کرد.
• - شبکه محدودیتی است که خودتان انتخاب کرده‌اید، پس می‌توانید انتخابش نکنید. اما شکستنش فقط وقتی معنا دارد که بقیهٔ صفحه هنوز به آن پایبند باشد.