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

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

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

Free-Learn

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

خب دوستان ما تو این قدم میخوایم نحوه واکنش گرایی عناصر رو با تکنیک / فناوری Grid در زبان CSS یاد بگیریم ، بنده آموزش سیستم Grid رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید ، چرا که در این بخش بصورت کلی با Grid کار میکنیم و وارد جزئیات نخواهیم شد.

Free-Learn

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

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

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

تعریف ظرف Grid

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

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

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

Free-Learn

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

مثال شماره ۱ : طرح بندی ساده با ۴ آیتم بدون واکنش گرایی

امتحان کنید

مثال شماره ۲ : طرح بندی ساده با ۴ آیتم + واکنش گرایی در دستگاهای مختلف با استفاده از دستور media@

امتحان کنید

مثال شماره ۳ : طرح بندی ساده یک قالب + واکنش گرایی

امتحان کنید

Free-Learn

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