نحوه ایجاد طرح‌بندی بدون درز بنایی با شبکه CSS و شیء متناسب: پوشش

همانطور که می بینید، فقط برای اینکه چیدمان کمی متمایزتر شود، یکی از تصاویر (نهمین تصویر) روی ردیف خودش قرار می گیرد و دو برابر بقیه بزرگتر است.

در صفحاتی که حداقل 850 پیکسل هستند، تصاویر ما در داخل یک طرح بنایی مانند این قرار می گیرند:

قدرت واقعی CSS Grid این است که به ما این توانایی را می دهد که فقط با چند تغییر سبک، طرح بندی فوق را تغییر دهیم. به عنوان مثال، در اینجا نسخه دیگری از آن وجود دارد:

در گذشته، برای ساخت این نوع طرح‌بندی‌ها، توسعه‌دهندگان مجبور بودند از یک کتابخانه جاوا اسکریپت مانند Masonry.js.

2. علامت گذاری HTML را تعریف کنید

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

در اینجا ساختار مورد نیاز است:

<ul class="grid">
  <li>
    <figure>
      <img width="640" height="1138" src=" alt="">
    </figure>
  </li>
  <li>
    <figure>
      <img width="640" height="427" src="morocco1.jpg" alt="">
    </figure>
  </li>
  <!-- more items here  -->
</ul>

در نظر بگیرید که این نشانه گذاری چقدر تمیز است. CSS Grid برای این نوع طرح‌بندی‌ها ایده‌آل است. اگر سعی کنید آن را با روش طرح بندی دیگری مانند flexbox بسازید، باید عناصر تودرتو را وارد کنید. و مهمتر از همه، راه حل های دیگر به اندازه کافی انعطاف پذیر نیستند. برای به‌روزرسانی طرح‌بندی، باید ساختار نشانه‌گذاری را بازسازی کنید و فقط سبک‌ها را تغییر ندهید.

3. سبک های اصلی را مشخص کنید

بهترین راه برای آشنایی با سبک‌های مرتبط با شبکه، بازرسی کنسول مرورگر، هدف قرار دادن لیست نامرتب و بررسی سطرها و ستون‌ها با استفاده از بازرس شبکه است.

در اینجا موارد قابل توجه در مورد سبک های ما آمده است:

• لیست ظرف شبکه ما خواهد بود.
• در صفحه نمایش های کوچک (<850 پیکسل)، همانطور که قبلاً گفتیم، یک طرح دو ستونی خواهیم داشت. اندازه ستون ها را از طریق مشخص می کنیم grid-template-columns دارایی در حالی که ما از آن استفاده خواهیم کرد grid-auto-rows ویژگی برای تنظیم اندازه ردیف های ایجاد شده ضمنی.
• در صفحه نمایش های بزرگ (≥850 پیکسل)، ما یک طرح پنج ستونی خواهیم داشت. دوباره، در اینجا، ما به طور صریح ردیف‌هایی را از طریق ایجاد نمی‌کنیم grid-template-rows ویژگی اما همچنان به اندازه سطرها از طریق the grid-auto-rows ویژگی.
• برای قرار دادن و اندازه ستون ها در طرح دسکتاپ و ستون نهم در تلفن همراه، از grid-row و grid-column خواص
• ما استفاده خواهیم کرد object-fit: cover مقدار ویژگی برای قرار دادن تصاویر در داخل ستون خود. به این ترتیب تصاویر بدون از دست دادن نسبت ابعاد خود، کاملاً درون ظرف خود قرار می گیرند.

شیء فیت چیست: پوشش؟

نکته آخر واقعاً مهم است. بدون object-fit: cover تصاویر ما مجبور می شوند با ابعاد سلول های شبکه مطابقت داشته باشند، مانند این:

اما با object-fit ما می توانیم نحوه مدیریت تصویر را تعریف کنیم. با cover مقدار، هر تصویر برش داده می شود تا نسبت تصویر خود را حفظ کند، در حالی که کوچکترین ابعاد آن (ارتفاع یا عرض) کاملاً متناسب با ظرف است. خواهد شد پوشش دادن فضای موجود

سبک های نهایی

با این گفته، در اینجا تمام سبک های چیدمان سنگ تراشی آورده شده است:

.grid {  
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 30vw;
  list-style: none;
}

.grid li:nth-child(9) {
  grid-column: 1 / -1;
  grid-row: span 2;
}

.grid figure,
.grid img {
  width: 100%;
  height: 100%;
}

.grid img {
  object-fit: cover;
  background: #f5f3f4;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

@media (min-width: 850px) {
  .grid {
    grid-gap: 24px;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 12vw;
  }

  .grid li:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .grid li:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }

  .grid li:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }

  .grid li:nth-child(4) {
    grid-column: 5;
    grid-row: 1;
  }

  .grid li:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
  }

  .grid li:nth-child(6) {
    grid-column: 5;
    grid-row: 2 / span 2;
  }

  .grid li:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }

  .grid li:nth-child(8) {
    grid-column: 1;
    grid-row: 3;
  }

  .grid li:nth-child(9) {
    grid-column: 3 / span 2;
    grid-row: 3 / span 2;
  }

  .grid li:nth-child(10) {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

  .grid li:nth-child(11) {
    grid-column: 5;
    grid-row: 4;
  }
}

این به ما نتیجه زیر را می دهد:

4. الگوهای پویا

کار عالی تا اینجا، مردم! ما موفق به ایجاد یک طرح بنایی جذاب، پر از تصاویر شده ایم. اما می توانیم کمی جلوتر برویم و کارها را خودکار کنیم. هدف این است که این طرح‌بندی را با عکس‌های Unsplash (33) مانند زیر عالی جلوه دهید:

با در نظر گرفتن این موضوع، ما باید سه کار را انجام دهیم:

• هر مورد را در داخل بلوک های تصویر (سه بلوک 11 تایی) از طریق یک متغیر CSS درون خطی شناسایی کنید (n). از این متغیر برای قرار دادن آن در ردیف سمت راست استفاده می کنیم.
• استفاده کنید :nth-child() CSS شبه کلاس برای ایجاد الگوهایی که به صورت پویا آیتم های جدید را با اضافه شدن به شبکه انتخاب می کند.
• مکان اقلام را در داخل یک ردیف شبکه با گرفتن آنها به طور خودکار انجام دهید n متغیر CSS

با قرار دادن همه اینها در محل، ما به این شبکه کاملاً پویا هدایت می‌شویم:

کمی وقت بگذارید تا ببینید اینجا چه خبر است. باز هم، بهترین راه برای درک آن، استفاده از ابزارهای مرورگر خود برای بررسی قرارگیری هر آیتم در داخل شبکه است!

نتیجه

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

می‌توانید این ایده را با استفاده از آن نه تنها برای گالری‌ها، بلکه برای فهرست‌های پست گسترش دهید و یک دکمه Load More برای آشکار کردن دسته‌های مختلف عناصر از طریق AJAX یا شاید ترکیب این طرح با اسکرول بی‌نهایت داشته باشید: