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

قرار دادن محتوا در داخل Grid.

webآگوست 25, 2021

@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
  }
}

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

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

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "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
  }
}

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

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

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

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

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

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

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

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

@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
  }
}

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

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

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

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

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

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

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

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

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

</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”>  Play all</i> <i class=”fa fa-plus”>  Add to</i> <i class=”fa fa-ellipsis-h”>  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"; 
}

@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
  }
}

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

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

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

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

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

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

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

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

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

@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
  }
}

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

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

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

.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 اضافه کنم تا از نظر بصری قابل تشخیص باشند.

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

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

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

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

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

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

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

@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
  }
}

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

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

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

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

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

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

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

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

.aside i {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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
  }
}

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

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

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

webآگوست 25, 2021

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

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

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

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

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

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

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

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

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

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

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

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

web

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

جلسه ۲۶: اولویت های مکان در CSS

جلسه ۶۱: ساخت یک لایه های برنامه موسیقی با Flexbox در CSS

جلسه ۴۰: استایل های پیش فرض مرورگر چگونه بر یک سند تأثیر می گذارند در CSS

جلسه ۳۶: border ها در CSS

دیدگاهتان را بنویسید لغو پاسخ

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

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