یک شبکه کارت که در هر عرضی خودش تعداد ستون درست را انتخاب می‌کند، یک اعلان است:
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
دو نیمه‌اش دو کار جدا می‌کنند. minmax(220px, 1fr) می‌گوید هیچ ستونی باریک‌تر از دویست و بیست پیکسل نشود و در غیر این صورت سهم مساوی بگیرد. auto-fit می‌گوید به تعداد ستونی که جا می‌شود بساز. نتیجه‌اش این است که در یک ظرف با عرض مشخص، سه ستون هم‌عرض ساخته می‌شود و هیچ کوئری رسانه‌ای در کار نیست.
واحد کسری چیزی است که این را ممکن می‌کند: سهمی از فضای باقی‌مانده پس از کسر فاصله‌ها و ستون‌های ثابت. برخلاف درصد، لازم نیست خودتان فاصله‌ها را از معادله کم کنید و همین است که چیدمان درصدی همیشه یک پیکسل کم و زیاد داشت.
خطوط، نه سلول‌ها
شبکه بر اساس خط شماره‌گذاری می‌شود و نه بر اساس خانه. یک شبکه سه ستونی چهار خط دارد. برای همین قرار دادن یک عنصر از خط یک تا خط سه یعنی دو ستون، و همین یک تفاوت شمارش، رایج‌ترین اشتباه اول است.
راه خواناتر این است که خطوط را نام‌گذاری کنید یا از نواحی نام‌دار استفاده کنید. ناحیه نام‌دار به شما اجازه می‌دهد کل قالب صفحه را به‌شکل یک نقشه متنی بنویسید که در همان برگه سبک قابل خواندن است، و جابه‌جا کردن یک بخش یعنی عوض کردن جای نامش در آن نقشه.
شبکه یا فلکس، و پرسشی که انتخاب می‌کند
پرسش این است که آیا هم‌ترازی در دو بعد برایتان مهم است. اگر بله، شبکه؛ اگر فقط یک ردیف یا یک ستون است، چیدمان انعطافی. تفاوت عملی‌اش این است که در شبکه، عضوهای سطر دوم با عضوهای سطر اول هم‌تراز می‌شوند و در چیدمان انعطافی نه.
برای یک نوار ابزار یا یک ردیف دکمه، شبکه بیش از حد است و چیدن در یک محور جواب سبک‌تری است. برای قالب کلی صفحه و برای هر چیزی که به شبکه کارت شبیه است، شبکه انتخاب درست است.
جایی که کار گیر می‌کند، قالب راست‌به‌چپ است
شبکه در یک سند راست‌به‌چپ خودش می‌چرخد و ستون اول از راست شروع می‌شود، پس برای بیشتر کارها هیچ تنظیم اضافه‌ای لازم نیست. جایی که می‌شکند، جایی است که کسی شماره خط را دستی نوشته باشد یا مکان‌دهی مطلق را با چپ و راست صریح ترکیب کرده باشد. نشانه‌اش هم مشخص است: قالبی که در حالت انگلیسی درست است و در فارسی وارونه می‌شود، تقریبا همیشه یک عدد خط دستی یا یک خاصیت جهت‌دار صریح در آن هست. استفاده از نواحی نام‌دار این را کاملا حذف می‌کند، چون نام‌ها جهت ندارند.
ابزار، و سالی که این حرف درست است
در سال ۲۰۲۶، بازرس شبکه در ابزار توسعه مرورگر خطوط و شماره‌هایشان را روی خود صفحه می‌کشد و رایگان است؛ جای شمردن ذهنی خطوط را گرفته، که همان جایی است که خطای یکی‌کم ساخته می‌شود. برای چیدمانی که به عرض خود ظرف واکنش نشان دهد و نه به عرض صفحه، کوئری ظرف در همه مرورگرهای امروزی پشتیبانی می‌شود و همان چیزی است که یک کارپوشه را در نوار کناری و در محتوای اصلی، دو شکل متفاوت می‌کند.
پرسش بعدی این است که کوئری رسانه‌ای اصلا کجا هنوز لازم است، که یک سند، برای هر اندازه صفحه جوابش را دارد. و اندازه هر خانه از قاعده‌های مارجین، بردر، پدینگ، و جایی که عرض خراب می‌شود می‌آید.