جلسه ۶۹: قرار دادن محتوا در داخل Grid. در CSS

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

.aside {
     ...
     justify-items: center;
     align-items: center;
  }

هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.

چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:

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

توجه:.main__header شامل هنر موسیقی و پخش خواهد بود.

.main__body جزئیات را در خود جای می دهد:

در این بخش ، ما بر روی .main__header تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید

<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>

      </div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> &nbsp;Play all</i> <i class=”fa fa-plus”> &nbsp;Add to</i> <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i> </div> </section> </div>

به نحوه ساختار سند توجه کنید..main__header دارای دو فرزند مستقیم است. div که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .detailsنتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:

بیایید این را زیبا کنیم

آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در مورد grid area استفاده کنیم.اولین مرحله تعریف grid area است:

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

@media only screen and (min-width:600px) {

  .aside {
     display: grid; 
  }
  
  .aside i {
    border: 1px solid red;
  }
}

من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.

آنجا چه اتفاقی می افتد؟

ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتم auto-placement grid در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items یا align-items ، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم.

.aside {
     ...
     justify-items: center;
     align-items: center;
  }

هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.

چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:

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

توجه:.main__header شامل هنر موسیقی و پخش خواهد بود.

.main__body جزئیات را در خود جای می دهد:

در این بخش ، ما بر روی .main__header تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید

<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>

      </div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> &nbsp;Play all</i> <i class=”fa fa-plus”> &nbsp;Add to</i> <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i> </div> </section> </div>

به نحوه ساختار سند توجه کنید..main__header دارای دو فرزند مستقیم است. div که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .detailsنتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:

بیایید این را زیبا کنیم

آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در مورد grid area استفاده کنیم.اولین مرحله تعریف grid area است:

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.

.aside i {
  display: none;
}

@media only screen and (min-width:600px) {
  .aside i {
    display: block;
  }
}

نمادها نمایش داده می شوند ، اما با هم تراز نشده اند.

تراز کردن نمادها

برچسب های i عناصر درون خطی هستند – و این توضیح می دهد که چرا هر ۲ نماد روی یک خط قرار می گیرند.بیایید ترتیب را درست کنیم.موارد داخل grid می توانند خود grid باشند. چرا که نه

مرحله ۱: نوار کناری را به یک ظرف Grid تبدیل کنید

با این کار می توانید از ویژگی های ترازبندی Grid استفاده کنید.از آنجا که نوار کناری فقط در صفحه های بزرگتر دیده می شود ، فراموش نکنید که این مورد را media query قرار دهید.

@media only screen and (min-width:600px) {

  .aside {
     display: grid; 
  }
  
  .aside i {
    border: 1px solid red;
  }
}

من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.

آنجا چه اتفاقی می افتد؟

ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتم auto-placement grid در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items یا align-items ، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم.

.aside {
     ...
     justify-items: center;
     align-items: center;
  }

هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.

چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:

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

توجه:.main__header شامل هنر موسیقی و پخش خواهد بود.

.main__body جزئیات را در خود جای می دهد:

در این بخش ، ما بر روی .main__header تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید

<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>

      </div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> &nbsp;Play all</i> <i class=”fa fa-plus”> &nbsp;Add to</i> <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i> </div> </section> </div>

به نحوه ساختار سند توجه کنید..main__header دارای دو فرزند مستقیم است. div که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .detailsنتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:

بیایید این را زیبا کنیم

آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در مورد grid area استفاده کنیم.اولین مرحله تعریف grid area است:

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.در انتهای این بخش ، ما طرح برنامه Catty Music ساخته شده را خواهیم داشت.تمرکز این درس قرار دادن و همسویی مطالب در داخل شبکه ها است.بیایید شروع کنیم.

۱٫ قرار دادن محتوا در نوار کناری

به نظر می رسد این آسان ترین کار برای شروع است. بیا بریم دنبالشنوار کناری متشکل از ۸ نماد است که به طور مساوی در کل طول میله کناری فاصله دارند.نمادها را مانند این وارد کنید:

<div class=”aside”> <i class=”fa fa-bars”></i> <i class=”fa fa-home”></i> <i class=”fa fa-search”></i> <i class=”fa fa-volume-up”></i> <i class=”fa fa-user”></i> <i class=”fa fa-spotify”></i> <i class=”fa fa-cog”></i> <i class=”fa fa-soundcloud”></i> </div>

در زیر نتیجه آن است:

همچنین ، وقتی در تلفن همراه هستید نمادها را پنهان کنید. هنگام بازدید از برنامه در صفحه بزرگتر ، آنها را نشان دهید. این اولین رویکرد تلفن همراه است.

.aside i {
  display: none;
}

@media only screen and (min-width:600px) {
  .aside i {
    display: block;
  }
}

نمادها نمایش داده می شوند ، اما با هم تراز نشده اند.

تراز کردن نمادها

برچسب های i عناصر درون خطی هستند – و این توضیح می دهد که چرا هر ۲ نماد روی یک خط قرار می گیرند.بیایید ترتیب را درست کنیم.موارد داخل grid می توانند خود grid باشند. چرا که نه

مرحله ۱: نوار کناری را به یک ظرف Grid تبدیل کنید

با این کار می توانید از ویژگی های ترازبندی Grid استفاده کنید.از آنجا که نوار کناری فقط در صفحه های بزرگتر دیده می شود ، فراموش نکنید که این مورد را media query قرار دهید.

@media only screen and (min-width:600px) {

  .aside {
     display: grid; 
  }
  
  .aside i {
    border: 1px solid red;
  }
}

من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.

آنجا چه اتفاقی می افتد؟

ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتم auto-placement grid در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items یا align-items ، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم.

.aside {
     ...
     justify-items: center;
     align-items: center;
  }

هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.

چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:

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

توجه:.main__header شامل هنر موسیقی و پخش خواهد بود.

.main__body جزئیات را در خود جای می دهد:

در این بخش ، ما بر روی .main__header تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید

<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>

      </div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> &nbsp;Play all</i> <i class=”fa fa-plus”> &nbsp;Add to</i> <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i> </div> </section> </div>

به نحوه ساختار سند توجه کنید..main__header دارای دو فرزند مستقیم است. div که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .detailsنتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:

بیایید این را زیبا کنیم

آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در مورد grid area استفاده کنیم.اولین مرحله تعریف grid area است:

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header زمینه قالب بندی grid را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img سپس dtlsاین به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.

این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

اکنون موارد grid در مرکز grid قرار می گیرند (در امتداد ردیف)

متن را در . detailsalign به مرکز تراز کنید :

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

برای یادآوری ،یک display: none از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:

<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

و ما این را داریم:

پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت به grid والدین.برای صفحه های بزرگتر ، ما به یک grid دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.

ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.