▦

تولیدکننده CSS Grid

Q: شیارها چگونه اندازهگذاری میشوند؟

هم ستونها و هم ردیفها با repeat() و واحد 1fr نوشته میشوند، پس همهٔ شیارها سهم برابری از فضای موجود میگیرند.

Q: کنترلها چه بازههایی را مجاز میکنند؟

ستونها و ردیفها اعداد صحیح از ۱ تا ۱۲ را میپذیرند؛ نوار لغزان فاصله از ۰ تا ۴۰ پیکسل است. ورودیهای خارج از بازه یا غیرعددی محدود میشوند و به پیشفرضهای ۳ ستون، ۲ ردیف و فاصلهٔ ۱۰px برمیگردند.

یک چیدمان CSS grid با ستون‌ها، ردیف‌ها و فاصله‌ی قابل تنظیم همراه با پیش‌نمایش زنده بسازید.

فایل‌هایتان در همین دستگاه می‌مانند

فایل‌ها در مرورگرتان پردازش می‌شوند و هرگز بارگذاری نمی‌شوند. سایت کد و منابع لازم برای اجرای ابزارها را دریافت می‌کند. بدون حساب یا ردیاب.

با گزینهٔ دانلود، این ابزار را در یک فایل HTML ذخیره کنید تا آفلاین استفاده شود.

حریم خصوصی →

columns

rows

gap: 10px

نتیجه

خروجی

یک مثال حل‌شده را امتحان کنید

مثال

4 ستون، 2 ردیف و فاصله 16 تنظیم کنید. CSS شامل grid-template-columns: repeat(4, 1fr);، grid-template-rows: repeat(2, 1fr); و gap: 16px; است: چهار ستون هم‌عرض با 16 پیکسل فاصله بین همه خانه‌ها.

به یاد داشته باشید

1fr سهمی از فضای خالی است، پس خانه‌ای با محتوای طولانی و نشکستنی همچنان می‌تواند ستونش را پهن کند؛ minmax(0, 1fr) ستون‌ها را برابر نگه می‌دارد. آیتم‌های بعد از هشتمی به ردیف‌های تازه‌ای می‌روند که شبکه خودکار اضافه می‌کند.

درباره این ابزار

سازندهٔ CSS Grid یک ابزار رایگان و درون‌مرورگری است که سه کنترل ساده — تعداد ستون، تعداد ردیف و فاصله — را به یک چیدمان grid آمادهٔ جای‌گذاری تبدیل می‌کند. مقادیر را تنظیم کنید، پیش‌نمایش زنده را ببینید که دوباره ترسیم می‌شود و قاعدهٔ تولیدشده را کپی کنید.

ستون‌ها و ردیف‌ها اعداد صحیح از ۱ تا ۱۲ هستند (پیش‌فرض ۳ و ۲) و فاصله یک نوار لغزان از ۰ تا ۴۰ پیکسل است (پیش‌فرض ۱۰). هر دو بُعد با repeat() و واحد 1fr نوشته می‌شوند، پس هر شیار سهم برابری از فضای موجود می‌گیرد. پیش‌نمایش هر سلول را با یک بلوک شماره‌دار و رنگی پر می‌کند تا ساختار شیارها را در یک نگاه ببینید و خروجی یک قاعدهٔ سادهٔ .grid با display: grid، grid-template-columns، grid-template-rows و gap است. یک کلیک آن را به کلیپ‌بورد شما کپی می‌کند.

همه‌چیز کاملاً در مرورگر شما اجرا می‌شود — بدون بارگذاری، بدون حساب، بدون ردیابی — و پس از بارگذاری صفحه آفلاین کار می‌کند.

پرسش‌های پرتکرار

شیارها چگونه اندازه‌گذاری می‌شوند؟

هم ستون‌ها و هم ردیف‌ها با repeat() و واحد 1fr نوشته می‌شوند، پس همهٔ شیارها سهم برابری از فضای موجود می‌گیرند.

کنترل gap چه می‌کند؟

فاصلهٔ grid را بر حسب پیکسل بین هر سلول، از ۰ تا ۴۰، تعیین می‌کند و به‌صورت زنده هم روی پیش‌نمایش و هم روی CSS تولیدشده اعمال می‌شود.

کنترل‌ها چه بازه‌هایی را مجاز می‌کنند؟

ستون‌ها و ردیف‌ها اعداد صحیح از ۱ تا ۱۲ را می‌پذیرند؛ نوار لغزان فاصله از ۰ تا ۴۰ پیکسل است. ورودی‌های خارج از بازه یا غیرعددی محدود می‌شوند و به پیش‌فرض‌های ۳ ستون، ۲ ردیف و فاصلهٔ ۱۰px برمی‌گردند.

چه CSS ای خروجی می‌دهد؟

یک قاعدهٔ .grid با display: grid، grid-template-columns و grid-template-rows که هر کدام با repeat() و 1fr تنظیم شده‌اند، و فاصله بر حسب پیکسل. دکمهٔ Copy همان قاعده را دقیقاً روی کلیپ‌بورد شما می‌گذارد.