‏حالا می‌تونی فاصله‌های گرید و فلکس رو استایل بدی

نویسنده می‌گه مدت‌ها برای استایل دادن به فاصله‌ی بین آیتم‌های گرید و فلکس راهی نبود و همه مجبور بودن با بوردر روی فرزندها، شبه‌المان‌ها یا حقه‌های بک‌گراند تقلب کنن؛ کاری که هم شکننده بود و هم DOM رو با چیزای صرفاً تزئینی شلوغ می‌کرد. حالا CSS داره این خلأ رو پر می‌کنه و می‌شه «فقط» یه فاصله رو استایل داد.

نکته‌ی اصلی اینه که خاصیت column-rule که قبلاً مخصوص چیدمان چندستونی بود، حالا به گرید و فلکس هم گسترش پیدا کرده، و یه خاصیت جدید به اسم row-rule هم برای فاصله‌های افقی اضافه شده. به گفته‌ی نویسنده بهشون فکر کن به‌شکل «یه خط تو فاصله‌ی ستون‌هام بکش» و «یه خط تو فاصله‌ی ردیف‌هام بکش»، اون هم بدون دست‌زدن به مارک‌آپ آیتم‌ها. کوچک‌ترین حالت ممکن این شکلیه:

.grid {
  display: grid;
  grid-template: repeat(3, 1fr);
  gap: 20px;
  column-rule: 3px solid oklch(58% 0.22 25);
}

فقط هم یه خط ساده نیست؛ یه دسته خاصیت برای کنترل دقیق همراهش اومده. ست کامل longhand رو داری (column-rule-width/style/color و معادل‌های row-rule)، یه shorthand به اسم rule که هردو محور رو با هم ست می‌کنه، و حتی می‌تونی با repeat() استایل خط‌ها رو فاصله‌به‌فاصله عوض کنی، مثلاً یکی‌درمیون توپر و خط‌چین.

برای جاهایی که خط ردیف و ستون همدیگه رو قطع می‌کنن، rule-break تصمیم می‌گیره چه اتفاقی بیفته: با none خط‌ها صاف از روی هم رد می‌شن و با intersection سر تقاطع می‌شکنن. نویسنده می‌گه برای گریدهای تمیزِ رابط کاربری معمولاً intersection قشنگ‌تره. در کنارش rule-inset هست که تعیین می‌کنه هر خط چقدر تو فاصله‌ش جمع بشه، و rule-overlap که مشخص می‌کنه سر تقاطع خط ردیف بالاست یا ستون.

یه خاصیت کاربردی دیگه rule-visibility-items هست که با مقدار between فقط بین دو آیتمی که هردو واقعاً وجود دارن خط می‌کشه، در حالی که all حتی تو سلول‌های خالی هم خط می‌ذاره. مهم‌تر اینکه عرض، رنگ و inset همگی انیمیشن می‌گیرن، پس می‌تونی روی hover یا اسکرول بدون آوتلاین و جاوااسکریپت ترنزیشن بدی.

به گفته‌ی نویسنده این یه بهبود کیفیت زندگیِ واقعی با progressive enhancement درسته: اگه مرورگری این قابلیت رو پشتیبانی نکنه، چیدمانت عادی رندر می‌شه و فقط خط‌ها نمیان. فعلاً این قابلیت تازه‌ست و قراره تو نسخه‌ی بعدی Chrome بیاد و تو Safari Technology Preview هم در دسترسه.

نکات کلیدی:

• column-rule حالا تو گرید و فلکس کار می‌کنه و row-rule برای فاصله‌ی افقی اضافه شده
• بدون مارک‌آپ یا شبه‌المان اضافه، مستقیم تو gap خط می‌کشی
• rule-break، rule-inset، rule-overlap و rule-visibility-items کنترل ریز می‌دن
• عرض، رنگ و inset انیمیشن‌پذیرن (مثلاً روی hover یا اسکرول)
• فعلاً تو Chromium نسخه‌ی بعدی و Safari TP؛ نبودنش چیدمان رو نمی‌شکنه