cssطراحی سایت

جلسه ۶۷: قرار دادن Grid area در CSS

قرار دادن Grid area

body {
      grid-template-areas: "sidebar  content"
                           "footer   footer";
}
توجه داشته باشید که ورودی های مقدار ویژگی ، نام موارد شبکه هستند! نوار کناری ، محتوا و پاورقی به نام موارد شبکه اشاره دارد اعلامیه فوق با توجه به نام موارد شبکه با موفقیت منطقه را به اشتراک گذاشته است – عالیه!

تصویر بالا به شما کمک می کند تا نحوه تقسیم قسمت های منطقه را بفهمید. پاورقی کل قسمت پایین را می گیرد. نوار کناری و محتوا به ترتیب قسمت های اول و دوم را به خود اختصاص می دهند. عالی! در اینجا ، تعریف کاملی از شبکه وجود دارد:
body {
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
من رنگ ها را برای کمکی بصری اضافه کرده ام. قسمت قرمز نشان دهنده پاورقی ، دو بخش دیگر ، بخش .main و .sidebar است. نتیجه آن این است:

<html>

 <head>

 </head>

 <body>

   <div class=”aside”></div>

   <div class=”main”></div>

   <div class=”footer”></div>

 </body>

</html>

/*===========
 basic reset
===========*/
body {
  margin: 0;
  padding: 0;
}
/*=============================
  grid set up
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
}

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}

.aside {
  background-color: #7f8c8d;
  grid-area: sidebar;
}
ببین این یک زمین بازی است … حتما زبانه های کد بالا را بررسی کنید.

زمان داستان است!

یک مرد جوان یک کیک خوب پخته شده دارد. او ۳ فرزند دارد که از او می خواهند به آنها بخشی بدهد. در حالت ایده آل ، کیک مشترک است؟ مرد جوان! مرد جوان مناطق را بریده و به فرزندان خود می دهد.

به همین دلیل است که من آن داستان شیرین را گفتم.

مانند کیک ، کل منطقه شبکه متعلق به چه عنصری است؟

ظرف شبکه!

همانند مرد جوان ، ظرف شبکه دارای ۳ فرزند است .ide ، .main و .footer. در حال حاضر محفظه شبکه انتخاب می کند که چگونه کل قسمت های منطقه به اشتراک گذاشته شود. یک چیز دیگر. از آنجا که بچه ها همه نام دارند ، ممکن است مرد جوان بگوید ، “هی برایان ، این قسمت توست” ، یا “هی اما ، این را داشته باش” با اختصاص بخشهایی به یک شخص مشخص ، تشخیص اینکه چه کسی کیک کیک را در اختیار دارد آسان است. من برای شما هیچ درمانی ندارم اگر در کشوری زندگی کنید که مردم بدون نام به آنجا بروند … موارد شبکه همه دارای نام هستند! ما این کار را با استفاده از ویژگی grid-area انجام دادیم. حالا ، بیایید کیک را به اشتراک بگذاریم!

ویژگی grid-template-areas

در حال حاضر grid container باید “کیک” را به اشتراک بگذارد ، یعنی قسمتهایی را برای چه کسی اختصاص دهد. روشهای زیادی برای انجام آنچه من قصد دارم برای شما توضیح دهم وجود دارد ، اما ویژگی grid-template-areas آسانترین دلیل برای مسأله است. این همان قسمتی است که برای کارایی باید بدانید.

ویژگی grid-template-areas چگونه کار می کند؟

نگاهی به کد زیر بیندازید:
body {
      grid-template-areas: "sidebar  content"
                           "footer   footer";
}
توجه داشته باشید که ورودی های مقدار ویژگی ، نام موارد شبکه هستند! نوار کناری ، محتوا و پاورقی به نام موارد شبکه اشاره دارد اعلامیه فوق با توجه به نام موارد شبکه با موفقیت منطقه را به اشتراک گذاشته است – عالیه!

تصویر بالا به شما کمک می کند تا نحوه تقسیم قسمت های منطقه را بفهمید. پاورقی کل قسمت پایین را می گیرد. نوار کناری و محتوا به ترتیب قسمت های اول و دوم را به خود اختصاص می دهند. عالی! در اینجا ، تعریف کاملی از شبکه وجود دارد:
body {
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
من رنگ ها را برای کمکی بصری اضافه کرده ام. قسمت قرمز نشان دهنده پاورقی ، دو بخش دیگر ، بخش .main و .sidebar است. نتیجه آن این است:

<html>

 <head>

 </head>

 <body>

   <div class=”aside”></div>

   <div class=”main”></div>

   <div class=”footer”></div>

 </body>

</html>

/*===========
 basic reset
===========*/
body {
  margin: 0;
  padding: 0;
}
/*=============================
  grid set up
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
}

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}

.aside {
  background-color: #7f8c8d;
  grid-area: sidebar;
}
ببین این یک زمین بازی است … حتما زبانه های کد بالا را بررسی کنید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا