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;
}
ببین این یک زمین بازی است …حتما زبانه های کد بالا را بررسی کنید.

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

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

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

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