این آموزش در تاریخ ۱۴۰۰/۱۰/۲۶ آپدیت شده است.

آموزش واکنش گرایی صفحات وب قدم آخر

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم آخر با من همراه باشید.

آموزش واکنش گرایی صفحات وب قدم آخر

Free-Learn

آموزش واکنش گرایی صفحات وب قدم آخر

خب دوستان در این جلسه ما میخوایم از تکنیک گرید یا Grid برای واکنش گرایی عناصر در صفحات وبمون استفاده نماییم.

بنده آموزش تکنیک Grid رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم اول از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید بعدش تشریف بیارید داخل این آموزش ( چون در این جلسه من فقط چنتا مثال از Grid میزنم و کاری به آموزش خوده Grid ندارم )

برای مشاهده آموزش کامل تکنیک Grid در CSS اینجا کلیک نمایید.

Free-Learn

استفاده از فناوری گرید یا Grid برای واکنش گرایی عناصر

برای استفاده از گرید یا Grid باید ۲ کار انجام بدیم :

  1. تعریف ظرف گرید ( برای نگهداری آیتم های گرید )
  2. تعریف آیتم های گرید ( که در ظرف گرید قرار میگیرند )
  • تعریف ظرف Grid

خیلی راحت با استفاده از ویژگی display میتونیم حالت نمایش grid رو روی یک تگ ایجاد کنیم.

  • تعریف آیتم های Grid

حالا هرچی بزاریم داخل این ظرف ، میشه فرزند یا آیتمی از گرید / Grid به همین راحتی!

Free-Learn

مثال های کاربردی از Grid

مثال شماره ۱ : ایجاد یک طرح بندی ساده ( هدر ، ستون راست و چپ ، ستون وسط محتوا و فوتر ) + واکنش گرایی ( یعنی در گوشی های موبایل ستون ها میوفتن زیر هم )

امتحان کنید

مثال شماره ۲ : قرار دادن یک عنصر در وسط باکس ( هم بصورت افقی و عمودی ) با استفاده از Grid

امتحان کنید

مثال شماره ۳ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم

امتحان کنید

مثال شماره ۴ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب