چیدمان شبکه واکنش گرا (RWD Grid View)
«چیدمان شبکه واکنش گرا» یعنی صفحه را به سطر و ستون تقسیم کنیم. سپس با تغییر عرض مرورگر، بلوک ها نرم جابه جا شوند. «شبکه (Grid)» سیستم ردیف و ستون است. نسخه های رایج 6 یا 12 ستونه اند. هدف، ظاهر خوب روی موبایل و دسکتاپ است.
شروع سریع با Grid واکنش گرا
اول همه عناصر را «border-box» کن. این یعنی padding و border داخل عرض حساب شوند. سپس کانتینر را grid کن. بعد ناحیه ها را با «grid-template-areas» بچین.
<div class="grid-container">
<div class="header">
<h1>نمونه</h1>
</div>
<div class="menu">
<ul>
<li>لینک 1</li>
<li>لینک 2</li>
</ul>
</div>
<div class="content">
<h2>محتوا</h2>
<p>توضیح کوتاه.</p>
</div>
<div class="facts">
<h3>نکات</h3>
<ul>
<li>حقیقت یک</li>
</ul>
</div>
<div class="footer">
<p>پاورقی</p>
</div>
</div>
استایل پایه واکنش گرا
اکنون رنگ، فاصله، و نواحی را تنظیم کن. بعداً با مدیاکوئری، شکست ها را اضافه کن.
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Lucida Sans", sans-serif;
font-size: 17px;
}
.grid-container {
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'facts'
'footer';
gap: 10px;
background-color: white;
}
.header {
grid-area: header;
background-color: purple;
color: #ffffff;
text-align: center;
}
.menu {
grid-area: menu;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
.content {
grid-area: main;
}
.facts {
grid-area: facts;
border: 1px solid #0099cc;
background-color: beige;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}
</style>
گام های عملی
- viewport را درست تنظیم کن.
- box-sizing را روی border-box بگذار.
- ساختار HTML شبکه را بساز.
- ناحیه ها را با grid-template-areas بچین.
- بعداً مدیاکوئری اضافه کن.
نکته: چیدمان شبکه واکنش گرا باید به راحتی کوچک و بزرگ شود. بنابراین واحدهای نسبی استفاده کن.
جمع بندی سریع
- شبکه یعنی سطر و ستون منظم.
- border-box، اندازه گیری را ساده می کند.
- ناحیه ها را نام گذاری کن.
- مدیاکوئری را بعداً اضافه کن.
برای «نما» به نما (Viewport) برو. همچنین درباره مقدمه RWD در واکنش گرا (RWD Intro) بخوان. اگر ساختار 12 ستونه می خواهی، صفحه چیدمان 12 ستونه را ببین.