آیا سنگ تراشی باید بخشی از شبکه CSS باشد؟

نمونه‌های این مقاله فقط در فایرفاکس با ویژگی‌های آزمایشی فعال (به about:config و فعال کردن grid-template-masonry-value) یا آخرین پیش‌نمایش فناوری سافاری کار می‌کنند. برای مشاهده آسان در مرورگرهای پشتیبانی نشده، ویدیوها را در زیر هر نسخه نمایشی تعاملی قرار داده ام.

گروه کاری CSS (CSSWG) در حال حاضر در حال بحث است که آیا سنگ تراشی را به عنوان بخشی از شبکه CSS یا به عنوان یک ماژول طرح بندی جدید شامل شود؟

در این مقاله من افکار و مثال های خود را در مورد اینکه آیا باید بخشی از شبکه CSS باشد یا نه به اشتراک خواهم گذاشت.

چیدمان بنایی چیست؟

ابتدا چند جزییات در صورتی که مشخص نیست سنگ تراشی چیست.

نوع طرح را “آبشار” نیز می نامند، که در آن عناصر با عرض یا ارتفاع متفاوت به صورت افقی یا عمودی چیده شده اند.

در اینجا یک نمونه از عناصر به صورت عمودی انباشته شده است. این طرح سال‌ها به عنوان طرح‌بندی Pinterest شناخته می‌شود.

در این مقاله، نمونه هایی را بررسی می کنم که شبیه طرح بندی Pinterest نیستند. به طور خاص، نمونه هایی که می توانند در صورت تقاضا از سنگ تراشی CSS استفاده کنند.

بحث نحو

در حال حاضر بحثی وجود دارد که آیا سنگ تراشی باید بخشی از شبکه CSS شود یا به عنوان یک ماژول طرح بندی جداگانه. برای اطلاعات بیشتر می توانید پست های وبلاگ زیر را بررسی کنید.

نام

من با این مقاله وب کیت در مورد نام موافقم.

در CSS، نام ها و کلمات کلیدی ساده و خواندن و نوشتن هستند. برخی از گزینه ها به نظر من بهتر عمل می کنند. به عنوان مثال:

• آبشار
• بسته بندی شده
• کوچک شدن (طبق پیشنهاد وبلاگ Webkit)
• آجر

.masonry {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: collapse;
  gap: 1rem;
}

برای من packed یا collapse بهتر کار کن

تصور کنید اگر display: flexbox نامگذاری شدند display: rubberband، یا اگر CSS display: grid نامگذاری شده است display: chessboard. وقتی میخونم برام همین حسه display: masonry.

نظر من در مورد بحث

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

اگر با نحو جدید پیش برویم (display: masonry، چندین سال طول می کشد تا در همه مرورگرهای اصلی پشتیبانی شود. بیایید صادق باشیم، چیدمان بخش اصلی یک صفحه وب است که اجرای بهبود تدریجی را دشوار می کند. شما یا سنگ تراشی دارید یا ندارید، درست است؟

تبدیل آن به یک شبکه CSS حداقل تضمین می کند که چیدمان کار می کند، اما بدون چیزهای آجری.

طراحی تطبیقی

در برنامه های کاربردی CSS، شبکه ای مانند این به ندرت دیده می شود:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

ممکن است اینگونه باشد:

.masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;

  @media (min-width: 700px) {
    display: masonry;
    masonry-template-tracks: repeat(3, 1fr);
    gap: 10px;
    padding: 0;

    &:has(.card-fixed) {
      display: grid;
    }
  }
}

در پایان روز، سنگ تراشی یک شبکه است. اگر از نحو جدید استفاده کنیم، تغییر طرح نیاز به تغییر کل ماژول طرح (شبکه، سنگ تراشی یا فلکس) دارد. کار خیلی زیاده

سنگ تراشی یک شبکه است

سنگ تراشی یک شبکه است، درست است؟ معرفی یک ماژول طرح‌بندی جدید به منحنی یادگیری قابل توجهی برای درک کامل و به خاطر سپردن ویژگی‌های جدید نیاز دارد.

واقعیت جالب: من هنوز نمی توانم برخی از خصوصیات یا مقادیر مش را به خاطر بسپارم، چه رسد به یک ماژول طرح بندی جدید برای سنگ تراشی.

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

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

اگر برخی از عناصر گرید ارتفاع بیشتری نسبت به بقیه داشته باشند، اگر از شبکه CSS استفاده کنیم، چیدمان به این شکل خواهد بود. سعی کنید بین “Same size” و “Dynamic size” جابجا شوید.

در این مرحله هیچ فایده ای برای داشتن یک ماژول طرح بندی جدید وجود ندارد (یعنی: display: masonry) فقط به این دلیل که چند عنصر ارتفاع بیشتری دارند (حداقل برای من).

در یک مورد واقعی ممکن است نیاز داشته باشم:

• یک شبکه معمولی در اندازه‌های دید کوچک داشته باشید، سپس در اندازه‌های بزرگتر به بنایی تغییر دهید.
• یا اگر بیش از 10 عنصر در شبکه وجود دارد، سنگ تراشی را اعمال کنید
• یا اگر اقلام دارای کلاس هستند از سنگ تراشی استفاده کنید dynamic-size
• و غیره.. گزینه ها بی پایان هستند

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

سعی کنید بین گزینه های زیر جابجا شوید. توجه: گزینه brick در زمان نگارش این مقاله در Firefox و Safari Technology Preview کار می کند.

این یک نسخه ویدیویی است:

نمونه هایی از نحو جدید در مقابل یکپارچه وب

ما یک طرح پاورقی داریم که در آن بخش ها در کنار هم نمایش داده می شوند. اینم طراحی:

وقتی فضای کافی وجود نداشته باشد، گروه های پاورقی بسته می شوند. این رفتار پیش فرض در شبکه CSS است.

چگونه این طرح را می سازید؟ فرض کنید می خواهیم از یک شبکه CSS استفاده کنیم.

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

با این کار شبکه به خوبی کار می کند. سعی کنید اندازه آن را تغییر دهید.

بیایید بهبود این طرح را با استفاده از سنگ تراشی بررسی کنیم.

گزینه یکپارچه شبکه

در این راه حل، شبکه با افزودن بهبود می یابد masonry به عنوان یک ارزش برای grid-template-rows.

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

در دمو زیر امتحان کنید:

• تغییر اندازه طرح.
• برای مشاهده تفاوت بین شبکه پیش‌فرض و بنایی، کادر را تغییر دهید.

این یک نسخه ویدیویی است:

گزینه مستقل شبکه

اگر از گزینه شبکه مستقل استفاده شود، چگونه کار می کند؟ چند تا فکر دارم:

• این یک شبکه پیش‌فرض است و تعداد دقیق آیتم‌هایی که خواهد داشت را نمی‌دانم.
• حتی اگر تعداد گروه‌های پاورقی را بدانم، وقتی اندازه عرض نمای/کانتینر تغییر می‌کند، باید آنها را به گونه‌ای دیگر مرتب کنند.
• اگر باید به یک ماژول طرح‌بندی جدید تغییر دهم، چگونه می‌توانم آنها را در سبک شبکه پیش‌فرض مدیریت کنم (یعنی: خیر)

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

.footer {
  display: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

به عنوان یک توسعه دهنده اگر بخواهم masonry در موارد خاص در یک شبکه اعمال شود، من مجبور خواهم شد استفاده کنم display:masonry. این برای من منطقی نیست زیرا:

• در مرورگرهای پشتیبانی نشده با شکست مواجه می شود display: masonry. من می توانم یک نسخه بازگشتی بنویسم، اما چرا CSS بیشتری بنویسیم در حالی که می توانیم با ادغام آن در شبکه CSS از آن جلوگیری کنیم؟
• این یک کپی از سینتکس شبکه CSS است.

طرح اخبار

در این مثال ما یک بخش اخبار داریم. این شامل یک خبر انتخاب شده در یک پنجره مشاهده بزرگ و یک شبکه 3 ستونی است.

سعی کنید اندازه طرح را تغییر دهید و ببینید چگونه رفتار می کند.

آیا متوجه فضای سفید در هر کارت شده اید؟ این رفتار پیش فرض در شبکه CSS است. بیایید بررسی کنیم که وقتی سنگ تراشی را فعال می کنید چگونه به نظر می رسد.

این یک نسخه ویدیویی است:

در اینجا شبکه پیش فرض CSS آمده است:

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.card.featured {
  @container news (min-width: 600px) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content 1fr;
  }
}

اگر بخواهیم بنایی را فعال کنیم دو راه داریم.

گزینه یکپارچه شبکه

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

.card.featured {
  @container news (min-width: 600px) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content 1fr;
  }
}

گزینه مستقل شبکه

کاوش:

.layout {
  display: masonry;
  masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

برای نقشه برجسته، می خواهم آن را از ابتدا تا انتهای ستون با 1 / -1. با توجه به مشخصات css-grid-3:

قرارگیری یک عنصر در محور شبکه ای یک ظرف بنایی با ویژگی های masonry-track-start و masonry-track-end (و مخفف آن ها masonry-track) مشخص می شود که نحو و تفسیر آن ها مشابه ویژگی های grid-column-start و grid-column-end (و مخفف grid-column-end) آنهاست.

یعنی باید تغییر کنم grid-column با masonry-track.

.card.featured {
  @container news (min-width: 600px) {
    masonry-track: 1 / -1;
    display: grid;
    grid-template-columns: max-content 1fr;
  }
}

بیایید فرض کنیم که من می خواهم استفاده کنم display: masonry به عنوان یک بهبود

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.card.featured {
  @container news (min-width: 600px) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content 1fr;
  }
}

@supports (display: masonry) {
  .layout {
    display: masonry;
    masonry-template-tracks: repeat(auto-fit, minmax(180px, 1fr));
     
  }

  .card-featured {
    @container news (min-width: 600px) {
      
      grid-column: initial;
      masonry-track: 1 / -1;
    }
  }
}

اگر موارد فوق را با گزینه web-integrated مقایسه کنیم، واضح ترین تفاوت در این است grid-template-rows: masonry روی مرورگرهای پشتیبانی شده کار خواهد کرد. اگر نه، فقط رفتار پیش فرض را نشان می دهد.

مثال دیگری که نشان می دهد چگونه سنگ تراشی می تواند در بالای یک شبکه CSS به جای یک ماژول طرح بندی جداگانه مفید باشد.

طرح بخش

در این طراحی، ما یک بخش داریم که شامل موارد زیر است:

• عنوان و توضیحات
• گالری تصاویر

ما باید گالری تصاویر را به صورت پویا بسازیم:

• در اندازه‌های کوچک، تصاویر سبک سنگ‌تراشی به خود می‌گیرند، اما وقتی محفظه تصویر عریض‌تر است (به اندازه یک تبلت)، تصاویر باید مربع باشند.
• اگر بیش از 5 عکس وجود داشته باشد، طرح‌بندی تغییر می‌کند (به عنوان مثال: نمای مربعی)

شکل زیر را ببینید:

همانطور که مشاهده کردید، ما از سبک سنگ تراشی اغلب بر اساس موارد زیر تغییر می کنیم:

• ابعاد ویو/کانتینر
• تعداد اقلام

گزینه یکپارچه شبکه

ابتدا شبکه بیرونی را ساختم (طرح بخش):

.section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: center;
}

برای گالری تصاویر باید موارد زیر را انجام دهم:

• نسبت ابعاد پیش فرض برای تصاویر است 1 / 1
• اگر ظرف به اندازه کافی بزرگ است، به طرح 2 ستونی تغییر دهید
• اگر تعداد تصاویر 5+ است، نسبت تصویر را به تغییر دهید 1 / 1 و شبکه با ستون های پویا

.gallery {
  --dynamic: repeat(auto-fit, minmax(100px, 1fr));
  --cols: var(--dynamic);
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-rows: masonry;
  gap: 1rem;

  
  @container (min-width: 450px) {
    img {
      aspect-ratio: 1;
    }
  }

  
  @container (min-width: 535px) {
    --cols: 1fr 1fr;

    img {
      aspect-ratio: initial;
    }

    
    &:has(img:nth-last-child(n + 5)) {
      --cols: var(--dynamic);

      img {
        aspect-ratio: 1;
      }
    }
  }
}

نسخه ی نمایشی تعاملی زیر را بررسی کنید و سعی کنید موارد را اضافه یا حذف کنید.

این یک نسخه ویدیویی است:

گزینه مستقل شبکه

برای اعمال سبک بنایی، ابتدا باید از شبکه پیش فرض استفاده کنیم. اگر display: masonry پشتیبانی می شود، می توانیم ستون ها را بیشتر بهبود بخشیم و تغییر دهیم.

.gallery {
  --dynamic: repeat(auto-fit, minmax(100px, 1fr));
  --cols: var(--dynamic);
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1rem;

  @supports (display: masonry) {
    display: masonry;
    masonry-template-tracks: var(--cols);

    @container (min-width: 535px) {
      --cols: 1fr 1fr;
    }

    
    &:has(img:nth-last-child(n + 5)) {
      --cols: var(--dynamic);
    }
  }
}

اگرچه وجود دارد display: masonry مانند یک قدرت فوق العاده به نظر می رسد، من نمی توانم آن را با نمونه های پویا نشان داده شده به خوبی ببینم.

موارد را در یک شبکه بچینید

مش ناهموار چیزی است که چشم انسان به سرعت متوجه می شود. ما می توانیم با شبکه CSS و سنگ تراشی آن را بهتر کنیم.

با استفاده از سنگ تراشی CSS، مرورگر می تواند خودش تصمیم بگیرد که عنصر یتیم را بر اساس اندازه خواهر و برادرش در کجا در شبکه قرار دهد.

در دمو زیر، برای افزایش ارتفاع عنصر برجسته شده، با نوار لغزنده بازی کنید.

این یک نسخه ویدیویی است:

توجه کنید که عنصر یتیم چگونه حرکت می کند. مرورگر سعی می کند طرح بندی را متعادل کند.

با توجه به اینکه این طرح می تواند شامل دو عنصر با نسبت ابعاد یکسان باشد، استفاده از سنگ تراشی ممکن است فقط در صورت تقاضا ضروری باشد.

گزینه یکپارچه شبکه

ما می توانیم از یک شبکه CSS استفاده کنیم و سنگ تراشی را برای هر موردی در آنجا نگه داریم.

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: masonry;
  gap: 1rem;
}

در این مورد، طرح یک شبکه است و سنگ تراشی تنها در صورتی توسط مرورگر استفاده می شود که عناصر متعدد با نسبت های مختلف وجود داشته باشد.

گزینه مستقل شبکه

اینجاست که استفاده از سنگ تراشی فردی گیج کننده می شود. این یک شبکه 2 ستونی با تنها دو عنصر است، چرا باید از بنایی استفاده کنم؟

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;

  @supports (display: masonry) {
    display: masonry;
    masonry-template-tracks: 1fr 1fr;
  }
}

همانطور که مشاهده کردید، شبکه CSS به طور پیش فرض استفاده می شود. اگر display: masonry پشتیبانی می شود، کد تکراری است.

طرح بندی پرسش های متداول

در این مثال، ما لیستی از سوالات را داریم. من این نمونه را در گذشته چندین بار دیده ام. طرحی که مستلزم آن است که ارتفاع هر سوال با محتوای آن برابر باشد.

راه حل فعلی این است که هر ستون را در عنصر HTML خود گروه بندی کنید و کار خواهد کرد، اما راه حل بهینه نیست، درست است؟

گزینه یکپارچه شبکه

با طراحی، این یک شبکه پیش‌فرض است، بنابراین می‌توانیم از یک شبکه CSS استفاده کنیم و سنگ‌تراشی را در اینجا نگه داریم.

.section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

گزینه مستقل شبکه

با این محلول در صورت حمایت از سنگ تراشی استفاده می شود. دوباره تکرار کد وجود دارد.

.section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;

  @supports (display: masonry) {
    display: masonry;
    masonry-template-tracks: repeat(auto-fit, minmax(250px, 1fr));
  }
}

می‌توانید بین شبکه پیش‌فرض و سبک بنایی در زیر جابه‌جا شوید.

این یک نسخه ویدیویی است:

هنگامی که سنگ تراشی آسان باشد، محبوبیت آن کمتر خواهد شد

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

نتیجه گیری

من قویاً معتقدم که ساختن قسمت سنگ تراشی شبکه CSS بهتر است زیرا ایجاد یک مقدار نمایش جدید مانند تکرار شبکه CSS به نظر می رسد. همچنین، من متقاعد نشده‌ام که اگر آن را بخشی از شبکه قرار دهیم، افزودن ویژگی‌های جدید به شبکه CSS ما را ملزم می‌کند که به سنگ‌تراشی فکر کنیم. چه چیز دیگری باید به شبکه CSS اضافه کنیم؟ از سال 2017 آنجا بوده است و من فقط یک تغییر را به یاد دارم grid-gap به gap.