این آموزش در تاریخ ۱۴۰۰/۱۰/۲۶ آپدیت شده است.
آموزش واکنش گرایی صفحات وب قدم آخر
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم آخر با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم آخر
خب دوستان در این جلسه ما میخوایم از تکنیک گرید یا Grid برای واکنش گرایی عناصر در صفحات وبمون استفاده نماییم.
بنده آموزش تکنیک Grid رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم اول از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید بعدش تشریف بیارید داخل این آموزش ( چون در این جلسه من فقط چنتا مثال از Grid میزنم و کاری به آموزش خوده Grid ندارم )
برای مشاهده آموزش کامل تکنیک Grid در CSS اینجا کلیک نمایید.
Free-Learn
استفاده از فناوری گرید یا Grid برای واکنش گرایی عناصر
برای استفاده از گرید یا Grid باید ۲ کار انجام بدیم :
- تعریف ظرف گرید ( برای نگهداری آیتم های گرید )
- تعریف آیتم های گرید ( که در ظرف گرید قرار میگیرند )
- تعریف ظرف Grid
خیلی راحت با استفاده از ویژگی display میتونیم حالت نمایش grid رو روی یک تگ ایجاد کنیم.
|
1 2 3 |
.My-Container { display: grid; } |
- تعریف آیتم های Grid
حالا هرچی بزاریم داخل این ظرف ، میشه فرزند یا آیتمی از گرید / Grid به همین راحتی!
|
1 2 3 4 5 6 |
<div class="My-Container"> <div class="Item">1</div> <div class="Item">2</div> <div class="Item">3</div> <div class="Item">4</div> </div> |
Free-Learn
مثال های کاربردی از Grid
مثال شماره ۱ : ایجاد یک طرح بندی ساده ( هدر ، ستون راست و چپ ، ستون وسط محتوا و فوتر ) + واکنش گرایی ( یعنی در گوشی های موبایل ستون ها میوفتن زیر هم )
|
1 2 3 4 5 |
.My-Container{ display: grid; grid-template-areas: 'header header header header header' 'seton-chap main main main seton-rast' 'footer footer footer footer footer'; grid-gap: 5px; } |
مثال شماره ۲ : قرار دادن یک عنصر در وسط باکس ( هم بصورت افقی و عمودی ) با استفاده از Grid
|
1 2 3 4 5 |
.My-Container{ display: grid; justify-content:center; align-items:center; } |
مثال شماره ۳ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم
|
1 2 3 4 5 |
@media (max-width: 600px){ .My-Container{ grid-template-columns: auto; } } |
مثال شماره ۴ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی
|
1 2 3 4 5 6 7 8 9 10 11 |
.MyContainer{ display: grid; grid-template-columns: auto auto auto auto; } /* وقتی عرض صفحه کمتر از 600 پیکسل شد */ @media (max-width: 600px){ .MyContainer{ grid-template-columns: auto; } } |
