سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبل به کار با ویژگی font-weight در CSS پرداختیم؛ ویژگی font-weight وزن فونت را تعیین می کند؛ به این ضورت که فونت دارای کاراکتر های ضخیم باشد و یا نازک.
در این جلسه قرار است به آموزش کار با ویژگی grid در CSS بپردازیم.
آموزش کار با ویژگی grid در CSS
به مثال زیر توجه نمایید؛ در این مثال یک طرح شبکه سه ستونی ایجاد کرده ایم که در آن ردیف اول ۱۵۰px ارتفاع دارد.
مثال :
| .grid-container { display: grid; grid: 150px / auto auto auto; } |
تعریف و کاربرد
ویژگی grid یک ویزگی مختصر برای موارد زیر است:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
| مقدار پیش فرض | normal |
| به ارث بردن | بله |
| متحرک بودن | بله |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.grid=”250px / auto auto auto |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی grid در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| grid | ۲٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۳ | ۴٫۰ |
سینتکس CSS
مثال :
| grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| none | مقدار پیش فرض. اندازه مشخصی برای ستون ها یا ردیف ها وجود ندارد. |
| grid-template-rows / grid-template-columns | اندازه (های) ستون ها و ردیف ها را مشخص می کند |
| grid-template-areas | طرح شبکه یا گرید را با استفاده از موارد نام گذاری شده مشخص می کند |
| grid-template-rows / grid-auto-columns | اندازه (ارتفاع) ردیف ها و اندازه خودکار ستون ها را مشخص می کند. |
| grid-auto-rows / grid-template-columns | اندازه خودکار ردیف ها را مشخص می کند و ویژگی grid-template-columns را تعیین می کند. |
| grid-template-rows / grid-auto-flow grid-auto-columns | اندازه (ارتفاع) ردیف ها، و نحوه قرارگیری موارد نصب شده خودکار و اندازه خودکار ستون ها را مشخص می کند. |
| grid-auto-flow grid-auto-rows / grid-template-columns | نحوه قرار دادن موارد نصب شده خودکار و اندازه خودکار ردیف ها را مشخص می کند و ویژگی grid-template-columns را تعیین می کند. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
مثال یک دو ردیف را که “مورد ۱” دو ستون اول را در دو ردیف اول (در یک طرح شبکه پنج ستون) می گذارد؛ مشخص می کند:
مثال :
| .item1 { grid-area: myArea; } .grid-container { display: grid; grid: 'myArea myArea . . .' 'myArea myArea . . .'; } |
مثال دو
همه موارد را نامگذاری کرده و یک ready-to-use را می سازد:
مثال :
| .item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { display: grid; grid: 'header header header header header' 'menu main main main right right' 'menu footer footer footer footer'; } |
کلام آخر
در این جلسه به آموزش کار با ویژگی grid در CSS پرداختیم؛ این ویژگی یک ویزگی مختصر برای grid-template-rows ،grid-template-columns ،grid-template-areas، grid-auto-rows ،grid-auto-columns و grid-auto-flow است.
در جلسه بعدی قرار است به آموزش ویژگی grid-area بپردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
