وارد CSS Grid شوید

هنگام ساخت یک برنامه وب، یکی از اولین چیزهایی که لازم است راهی برای چیدمان محتوای برنامه شما است.

بسیاری از طراحان از شبکه های خیالی برای چیدمان محتوا استفاده می کنند، چه برای یک سایت یا برنامه. گروه CSS سخت کار کرده است تا طرح‌بندی‌ها را آسان‌تر کند و به عنوان بخشی از آن ، ماژول طرح‌بندی شبکه‌ای CSS را تولید کرده است که اکنون در مرورگرها در حال ظهور است.

این ویژگی برای آزمایش در Chrome پشت پرچم آزمایشی موجود است. همچنین از نسخه 10 در اینترنت اکسپلورر پیاده سازی شده است و احتمالاً به زودی در اکثر مرورگرها خواهد بود.

خلاصه اجرایی

• CSS Grid Layout به شما امکان می دهد ردیف ها و ستون هایی را برای طرح بندی خود تعریف کنید
• شبکه ها می توانند برای استفاده از فضای موجود سازگار شوند
• ترتیب محتوا می تواند مستقل از ترتیب نمایش کانتینر شبکه ای باشد
• طرح‌بندی‌ها می‌توانند بر اساس درخواست‌های رسانه تغییر کنند و طراحی واکنش‌گرا را آسان‌تر کند
• محتوا ممکن است همپوشانی داشته باشد (فعال کردن طرح‌بندی که با روش‌های دیگر غیرممکن است)
• طرح بندی شبکه سریع است

در اینجا یک ویدیوی کلی وجود دارد که در مورد نحوه عملکرد CSS Grid Layout توضیح می دهد ( اسلایدها در اینجا هستند :

آن را امتحان کنید

استفاده از CSS Grid Layout در کروم اکنون آسان است. اولین کاری که باید انجام دهید این است که پرچم آزمایشی را روشن کنید تا این ویژگی فعال شود.

ابتدا URL chrome://flags را بارگیری کنید و به گزینه فعال کردن ویژگی‌های آزمایشی Web Platform مانند زیر بروید:

فقط روی فعال کردن کلیک کنید تا پرچم روشن شود، و باید یک اعلان برای راه اندازی مجدد مرورگر را مشاهده کنید که به نظر می رسد:

اکنون فقط روی دکمه Relaunch Now کلیک کنید تا مرورگر خود را مجدداً راه اندازی کنید و برای امتحان CSS Grid Layout آماده خواهید بود.

نظر خود را با ما در میان بگذارید

CSS Grid Layout یک ایده اولیه جدید و عالی برای محتوای وب است، اما طبق معمول همه ما مشتاق شنیدن نظرات توسعه دهندگان در مورد آن هستیم. راه‌های زیادی برای ارائه بازخورد وجود دارد - نظر خود را اینجا بگذارید، نامه‌ای را به فهرست گروه کاری W3C CSS با «[css-grid]» در خط موضوع ارسال کنید، باگ‌های گزارش یا وبلاگ را ثبت کنید و نظر خود را در مورد آن توییت کنید. ما مشتاقانه منتظر دیدن طرح‌بندی‌های عالی هستیم که با این ویژگی جدید فوق‌العاده مفید می‌سازید.

هنگام ساخت یک برنامه وب، یکی از اولین چیزهایی که لازم است راهی برای چیدمان محتوای برنامه شما است.

بسیاری از طراحان از شبکه های خیالی برای چیدمان محتوا استفاده می کنند، چه برای یک سایت یا برنامه. گروه CSS سخت کار کرده است تا طرح‌بندی‌ها را آسان‌تر کند و به عنوان بخشی از آن ، ماژول طرح‌بندی شبکه‌ای CSS را تولید کرده است که اکنون در مرورگرها در حال ظهور است.

این ویژگی برای آزمایش در Chrome پشت پرچم آزمایشی موجود است. همچنین از نسخه 10 در اینترنت اکسپلورر پیاده سازی شده است و احتمالاً به زودی در اکثر مرورگرها خواهد بود.

خلاصه اجرایی

• CSS Grid Layout به شما امکان می دهد ردیف ها و ستون هایی را برای طرح بندی خود تعریف کنید
• شبکه ها می توانند برای استفاده از فضای موجود سازگار شوند
• ترتیب محتوا می تواند مستقل از ترتیب نمایش کانتینر شبکه ای باشد
• طرح‌بندی‌ها می‌توانند بر اساس درخواست‌های رسانه تغییر کنند و طراحی واکنش‌گرا را آسان‌تر کند
• محتوا ممکن است همپوشانی داشته باشد (فعال کردن طرح‌بندی که با روش‌های دیگر غیرممکن است)
• طرح بندی شبکه سریع است

در اینجا یک ویدیوی کلی وجود دارد که در مورد نحوه عملکرد CSS Grid Layout توضیح می دهد ( اسلایدها در اینجا هستند :

آن را امتحان کنید

استفاده از CSS Grid Layout در کروم اکنون آسان است. اولین کاری که باید انجام دهید این است که پرچم آزمایشی را روشن کنید تا این ویژگی فعال شود.

ابتدا URL chrome://flags را بارگیری کنید و به گزینه فعال کردن ویژگی‌های آزمایشی Web Platform مانند زیر بروید:

فقط روی فعال کردن کلیک کنید تا پرچم روشن شود، و باید یک اعلان برای راه اندازی مجدد مرورگر را مشاهده کنید که به نظر می رسد:

اکنون فقط روی دکمه Relaunch Now کلیک کنید تا مرورگر خود را مجدداً راه اندازی کنید و برای امتحان CSS Grid Layout آماده خواهید بود.

نظر خود را با ما در میان بگذارید

CSS Grid Layout یک ایده اولیه جدید و عالی برای محتوای وب است، اما طبق معمول همه ما مشتاق شنیدن نظرات توسعه دهندگان در مورد آن هستیم. راه‌های زیادی برای ارائه بازخورد وجود دارد - نظر خود را اینجا بگذارید، نامه‌ای را به فهرست گروه کاری W3C CSS با «[css-grid]» در خط موضوع ارسال کنید، باگ‌های گزارش یا وبلاگ را ثبت کنید و نظر خود را در مورد آن توییت کنید. ما مشتاقانه منتظر دیدن طرح‌بندی‌های عالی هستیم که با این ویژگی جدید فوق‌العاده مفید می‌سازید.