۰ امیر حق شناس
خلاصه جلسه سوم - grid در css - ایجاد سطرها و ستون‌ها توسط css grid
جامعه Html & CSS ایجاد شده در ۰۲ آبان ۱۴۰۴

خلاصه جلسه: ایجاد سطرها و ستون‌ها در CSS Grid

۱. تعریف Grid Layout

  • فعال‌سازی Grid روی والد با:

     

    display: grid;
    

۲. ساخت ستون‌ها: grid-template-columns

  • تعیین تعداد و اندازه ستون‌ها
  • مقداردهی با px، %، fr، auto
  • مثال کاربردی:

     

    grid-template-columns: 200px auto 40%;
    

۳. ساخت ردیف‌ها: grid-template-rows

  • تعیین تعداد و اندازه ردیف‌ها
  • مثال:

     

    grid-template-rows: auto auto auto auto;
    

۴. فاصله‌گذاری بین خانه‌ها

  • column-gap: فاصله بین ستون‌ها
  • row-gap: فاصله بین ردیف‌ها
  • gap: تنظیم همزمان فاصله‌ها
  • مثال:

     

    gap: 10px;