ابنِ شبكات ذاتية التكيّف دون استعلامات وسائط، وحاذِ المكوّنات المتداخلة على مسارات الأصل باستخدام subgrid.
افتح هذا الدرس في Kodokonينشئ repeat(auto-fill, ...) وrepeat(auto-fit, ...) من المسارات بقدر ما يسمح به عرض الحاوية. ولا يظهر الفرق إلا عندما يكون عدد العناصر أقل من عدد المسارات الممكنة: يُبقي auto-fill المسارات الفارغة (تبقى بطاقتاك بحجمهما الأدنى، مع فراغ على اليمين)، في حين أن auto-fit يطوي المسارات الفارغة إلى صفر - عندئذٍ تمتص المسارات المشغولة، بحكم أن حدها الأقصى 1fr، كل المساحة المُحرَّرة فتتمدد بطاقتاك عبر العرض الكامل.
.gallery-fill {
display: grid;
grid-template-columns: repeat(
auto-fill, minmax(150px, 1fr)
);
}
.gallery-fit {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(150px, 1fr)
);
}فخّان في minmax() يقع فيهما حتى المطوّرون الكبار. الأول: يفيض minmax(240px, 1fr) عندما تكون الحاوية أضيق من 240px - فالحد الأدنى أرضية صلبة. والحل الاصطلاحي يُعشِّش دالة مقارنة: minmax(min(100%, 240px), 1fr). الثاني: 1fr بمفرده يكافئ minmax(auto, 1fr)؛ ويتيح الحد الأدنى auto لمحتوى غير قابل للكسر (رابط طويل، أو <pre>) أن يوسّع المسار إلى ما يتجاوز حصته. أما minmax(0, 1fr) فيثبّت التوزيع.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}يحلّ subgrid المشكلة القديمة للمحاذاة عبر المكوّنات المتداخلة. فمع grid-template-rows: subgrid، لا تخترع الشبكة الداخلية مساراتها الخاصة: بل تتبنّى مسارات الأصل على المساحة التي تشغلها. كما ترث أسماء خطوط الأصل (ويمكنها إضافة أسمائها الخاصة)، وكذلك gap، الذي يمكنها تجاوزه محليًا. والحالة الكلاسيكية: بطاقات يتحاذى فيها العنوان والوصف والتذييل أفقيًا من بطاقة إلى أخرى، أيًّا كان طول محتواها - كان تحقيق ذلك بنظافة مستحيلًا قبل subgrid، لأن كل بطاقة كانت تحسب ارتفاعاتها بمعزل.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0.5rem;
}