دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۴
  • فروردین

جلسه ۱۱۳ : آموزش کار با ویژگی grid-auto-flow در CSS

  • دسته‌بندی‌ها :
جلسه ۱۱۳ : آموزش کار با ویژگی grid-auto-flow در CSS
    • جزئیات
    • نوع محتواآموزشی

      سلام به همه پی وی لرنی های عزیز!
      به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
      در جلسه گذشته آموختیم که ویژگی grid-auto-columns چیست؛ این ویژگی یک اندازه یا سایز را برای ستون ها در یک ظرف grid تنظیم می کند.
      در این جلسه آموزش کار با ویژگی grid-auto-flow در CSS را به علاقمندان این دوره ارائه می کنیم.

      آموزش کار با ویژگی grid-auto-flow در CSS

      به مثال زیر توجه نمایید؛ در این مثال ستون آیتم های نصب شده به صورت خودکار در ستون قرار گرفته اند.

      مثال : 

      تعریف و کاربرد

      ویژگی grid-auto-flow محل قرار گیری خودکار یا auto-placed آیتم ها را در شبکه یا grid را کنترل می کند.

      مقدار پیش فرضrow
      به ارث بردنخیر
      متحرک بودنبله
      نسخهCSS Grid Layout Module Level 1
      سینتکس JavaScript“object.style.gridAutoFlow=”row dense

      پشتیبانی مرورگر ها

      در ادامه آموزش کار با ویژگی grid-auto-flow در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.

      نام ویژگیChrome iconFirefox iconOpera iconSafari-FR iconInternet-Explorer icon
      grid-auto-flow۵۷۵۲۴۴۱۰۱۶

      سینتکس CSS

      مثال : 

      مقدار ویژگی

      مقدارتوضیحات
      rowمقدار پیش فرض است – آیتم ها را با پر کردن هر سطر جایگذاری می کند.
      columnآیتم ها را با پر کردن هر ستون جایگذاری می کند.
      denseآیتم ها را با پر کردن جا های خالی در شبکه جایگذاری می کند.
      row denseآیتم ها را با پر کردن هر سطر و جای خالی در شبکه جایگذاری می کند.
      column denseآیتم ها را با پر کردن هر ستون و جای خالی در شبکه جایگذاری می کند.

      مثال های بیشتر

      مثال یک

      پر کردن هر جای خالی در شبکه از طریق افزودن مقدار “dense” :

      مثال : 

      کلام آخر

      در این جلسه به آموزش کار با ویژگی grid-auto-flow در CSS پرداختیم و آموختیم که این ویژگی محل قرار گیری خودکار یا auto-placed آیتم ها را در شبکه را کنترل می کند.
      در جلسه آینده قرار است به آموزش و آشنایی با ویژگی grid-auto-rows بپردازیم.
      با پی وی لرن همراه باشید.

      QR: جلسه ۱۱۳ : آموزش کار با ویژگی grid-auto-flow در CSS
      به اشتراک بگذارید
      , , , ,


      دیدگاه کاربران

      لیست مطالب دوره

      مطالب ویژه