سازنده CSS Grid
ستونها و سطرهای خود را تنظیم کنید، روی سلولها بکشید تا آیتمها را قرار دهید و کد CSS گرید را به همراه HTML متناظر با یک کلیک کپی کنید.
گرید شما کاملاً در مرورگرتان ساخته میشود. هیچیک از تنظیمات شما در BroBroGo آپلود نخواهد شد.
سوالات متداول
چگونه آیتمها را روی گرید قرار دهم؟
روی سلولها کلیک کرده و بکشید تا یک مستطیل مشخص شود — وقتی رها کنید، به یک آیتم فرزند تبدیل میشود که آن ستونها و سطرها را پوشش میدهد. هر آیتمی که ترسیم میکنید، ویژگیهای grid-column و grid-row اختصاصی خود را در CSS و یک div متناظر در HTML دریافت میکند. آیتمها میتوانند همپوشانی داشته باشند و آیتمی که دیرتر ترسیم شده روی بقیه قرار میگیرد؛ برای حذف هر آیتم از علامت × روی آن استفاده کنید.
آیا ستونها و سطرها میتوانند اندازههای متفاوتی داشته باشند؟
بله. هر ترک (سراسر سطر یا ستون) کادر اندازه اختصاصی خود را دارد و میتوانید هر مقدار معتبر گرید را در آن بنویسید — مانند 1fr, 200px, auto, min-content یا minmax(120px, 1fr). ترکهایی که اندازه یکسانی دارند در تابع repeat() ادغام میشوند تا خروجی کوتاه بماند. فاصله ستونها و سطرها نیز به طور جداگانه تنظیم میشوند و در صورت یکسان بودن، به یک ویژگی gap واحد تبدیل میشوند.
با کد تولید شده چه کار کنم؟
کدهای CSS و HTML را در کنار هم کپی کنید. کد HTML کانتینر را به همراه یک div برای هر آیتم به شما میدهد و CSS گرید را تعریف کرده و موقعیت هر آیتم را مشخص میکند. هر دو را در پروژه خود قرار دهید تا همان طرحبندی که در اینجا رسم کردهاید ایجاد شود.