زمین بازی گرید CSS
قالبها، فاصلهها و جانمایی گرید CSS را بهصورت بصری بسازید، سپس CSS چیدمان را کپی کنید.
روی یک آیتم شمارهدار در گرید کلیک کنید تا آن را انتخاب و جابجا کنید.
—
—
—
—
هنوز آیتمی نیست. برای قرار دادن روی گرید یک آیتم اضافه کنید.
پیشتنظیمهادرباره زمین بازی گرید CSS
زمینبازی CSS Grid بهصورت بصری، چیدمانهای واقعی گرید را میسازد. مسیرهای ستون و ردیف را اضافه یا حذف کنید تا grid-template-columns و grid-template-rows شکل بگیرند، فاصله ستونها و ردیفها را تنظیم کنید و هر چهار ویژگی چیدمان — justify-items، align-items، justify-content و align-content — را دقیق کنید؛ در همین حال پیشنمایش هر تغییری را فوراً نشان میدهد.
جانمایی آیتمها جایی است که گرید واقعاً قدرتمند میشود: آیتم اضافه کنید، یکی را در پیشنمایش انتخاب کنید و با column start، column span، row start و row span موقعیتش را تعیین کنید. این همان تکنیکی است که پشت تقریباً هر چیدمان گرید واقعی در دنیای وب قرار دارد؛ برای ساختن سایدبار، هدر و سلولهای ویژه که چند مسیر را در بر میگیرند.
سه پیشتنظیم — holy grail، dashboard و gallery — ساختارهای کلاسیک صفحه را بارگذاری میکنند تا آنها را بررسی و برای نیاز خود تطبیق دهید. وقتی چیدمان درست شد، CSS تولیدشده را کپی کنید که شامل تمام قواعد کانتینر گرید و جانمایی هر آیتم است.
نحوه استفاده از زمین بازی گرید CSS
- مسیرهای ستون و ردیف را برای تعریف قالب گرید اضافه یا حذف کنید.
- فاصله ستونها و ردیفها (gap) را تنظیم کنید.
- کنترلهای چیدمان را تنظیم کنید: justify-items، align-items، justify-content و align-content.
- آیتم اضافه کنید، یکی را در پیشنمایش انتخاب کنید و برای جانمایی آن، شروع و طول ستون/ردیف را تعیین کنید.
- یکی از پیشتنظیمهای holy grail، dashboard یا gallery را بارگذاری کنید تا یک چیدمان کلاسیک را مطالعه کنید.
- CSS تولیدشده را در استایلشیت خود کپی کنید.