آموزش نمای گرید(grid view) در واکنش گرایی در CSS

نمای گرید(Grid-View) چیست؟

بسیاری از صفحات وب مبتنی بر نمای گرید(grid-view) هستند؛ این یعنی این صفحات به ردیف ها(row) و ستون هایی(column) تقسیم شده اند. یک نمای گرید واکنش گرا، اغلب از 6 یا 12 ستون تشکیل می شود و همان طور که ما پنجره ی مرورگر خود را تغییر اندازه می دهیم، کوچک یا بزرگ می شود. 

ایجاد یک نمای گرید(Grid View)

اکنون می خواهیم یک نمای گرید را ایجاد کنیم. ابتدا مطمئن شوید که تمام عناصر HTML از ویژگی box-sizing با مقدار border-box استفاده کنند.  این باعث می شود که padding و border در عرض و ارتفاع کلی عناصر اضافه شوند(به حساب آورده شوند). بنابراین کد زیر را در بالای کدهای CSS خود قرار دهید:

* {
  box-sizing: border-box;
}

برای اطلاعات بیشتر در مورد ویژگی box-sizing می توانید این مقاله را در آموزش های CSS مطالعه کنید. 

کدهای HTML

ما می خواهیم یک ظرف گرید(grid container)  با پنج آیتمِ گریدِ زیر را ایجاد کنیم:

1. header
2. menu
3. content
4. facts
5. footer

<div class="grid-container">

<div class="header"><h1>مولانا</h1></div>

<div class="menu">
  <ul>
    <li>مثنوی معنوی</li>
    <li>دیوان شمس</li>
    <li>فیه ما فیه</li>
    <li>مجالس سبعه</li>
  </ul>
</div>

<div class="content">
  <h1>مولانا</h1>
  <p>مولانا جلال الدین محمد بلخی مشهور به مولوی شاعر بزرگ قرن هفتم هجری قمری است.</p>
  <p>وی در سال ۶۰۴ هجری قمری در بلخ زاده شد. پدر وی بهاءالدین که از علما و صوفیان بزرگ زمان خود بود به سبب رنجشی که بین او و سلطان محمد خوارزمشاه پدید آمده بود از بلخ بیرون آمد و بعد از مدتی سیر و سیاحت به قونیه رفت.</p>
  <p>مولانا بعد از فوت پدر تحت تعلیمات برهان الدین محقق ترمذی قرار گرفت.</p>
</div>

<div class="facts">
  <h2>بهترین آثار مولانا:</h2>
  <ul>
    <li>مثنوی معنوی</li>
    <li>دیوان شمس</li>
  </ul>
</div>

<div class="footer"><p>پایان</p></div>

</div>

کدهای CSS

در مثال زیر، از مقداری کد CSS برای استایل دهی و رنگ آمیزی استفاده کرده ایم تا مثال بهتر به نظر برسد:

نکته: برای اضافه کردن مدیا کوئری ها و نقاط شکست(breakpoints) برای سایز های مختلف صفحه، به مقاله ی بعدی مراجعه کنید. 

* {
  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';
  background-color: white;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: purple;
  text-align: center;
  color: #ffffff;
}

.header > h1 {
  font-size: 40px;
}

.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;
}

.content > h1 {
  font-size: 30px;
  margin-bottom: 7px;
}

.content > p {
  margin-bottom: 7px;
}

.facts {
  grid-area: facts;
  border: 1px solid #0099cc;
  background-color: beige;
  padding: 10px;
}

.facts > h2 {
  font-size: 20px;
}

.facts li {
  margin-bottom: 5px;
}

.footer {
  grid-area: footer;
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
}

منبع: https://www.w3schools.com/css