media queries के बिना स्वयं-अनुकूलित होने वाली ग्रिड बनाएँ और subgrid के साथ नेस्टेड कंपोनेंट्स को पैरेंट के tracks पर संरेखित करें।
इस पाठ को Kodokon में खोलेंrepeat(auto-fill, ...) और repeat(auto-fit, ...) उतने tracks बनाते हैं जितने कंटेनर की चौड़ाई अनुमति देती है। अंतर केवल तब दिखता है जब आइटम, संभव tracks से कम हों: auto-fill खाली tracks को बनाए रखता है (आपके दो कार्ड अपने न्यूनतम आकार पर बने रहते हैं, दाईं ओर खाली जगह के साथ), जबकि auto-fit खाली tracks को शून्य पर समेट देता है - तब भरे हुए tracks, जिन्हें 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) तब overflow करता है जब कंटेनर 240px से संकरा हो - न्यूनतम एक कठोर floor है। मुहावरेदार समाधान एक तुलना फ़ंक्शन को नेस्ट करता है: minmax(min(100%, 240px), 1fr)। दूसरा: अकेला 1fr, minmax(auto, 1fr) के तुल्य है; auto न्यूनतम अटूट सामग्री (एक लंबा URL, एक <pre>) को track को उसके हिस्से से अधिक चौड़ा करने देता है। minmax(0, 1fr) वितरण को लॉक कर देता है।
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}subgrid नेस्टेड कंपोनेंट्स में संरेखण की पुरानी समस्या हल करता है। grid-template-rows: subgrid के साथ, भीतरी ग्रिड अपने खुद के tracks का आविष्कार नहीं करती: यह जिस क्षेत्र में फैलती है उस पर पैरेंट के tracks को अपना लेती है। यह पैरेंट के line names भी विरासत में लेती है (और अपने भी जोड़ सकती है), साथ ही gap भी, जिसे यह स्थानीय रूप से ओवरराइड कर सकती है। classic मामला: ऐसे कार्ड जिनके title, description और footer एक कार्ड से दूसरे तक क्षैतिज रूप से संरेखित होते हैं, उनकी सामग्री की लंबाई चाहे जो हो - 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;
}