CSS की 1 लाइन से बनने वाले मॉडर्न लेआउट

सिर्फ एक लाइन से उपयोगी लेआउट बनाने वाली CSS properties

• बीच में! → place-items: center

• Pancake स्टैक टूटना → flex: [grow] [shrink] [baseWidth]

• साइडबार → grid-template-columns: minmax([min],[max])

• Pancake स्टैकिंग → grid-template-rows: auto 1fr auto

• क्लासिक वेब → grid-template: auto 1fr auto / auto 1fr auto

• 12-Span ग्रिड → grid-template-columns: repeat(12, 1fr)

• RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))

• आइटमों के बीच दूरी बनाए रखें → justify-content: space-between

• स्टाइल बनाए रखें → width: clamp([min], [actual], [max])

• अनुपात बनाए रखें → aspect-ratio → [width] / [height]

[xguru]

place-items और पैनकेक वाकई बहुत उपयोगी हैं।