आप flexbox की जगह CSS grid कब चुनते हैं, और flexbox कब भी सही जवाब रहता है?

grid तब इस्तेमाल करें जब आप content को ऐसे layout में रख रहे हों जिसे आपने दो आयामों में तय किया है, जैसे कोई page shell या ऐसा card grid जिसकी rows और columns सीध में हों। flexbox तब जब items की एक ही row या column को अपने content के हिसाब से खुद जगह बांटनी हो, जैसे toolbar या button group। grid पहले layout देखता है, flexbox पहले content, और दोनों एक दूसरे के अंदर आराम से बैठते हैं।

मेरा नियम यह है कि grid तब है जब मुझे layout की शक्ल पहले से पता है और मैं उसमें चीज़ें रख रहा हूं, और flexbox तब जब items को एक धुरी पर अपना आकार खुद तय करना है। तो sidebar और content column वाला page shell, या ऐसा card grid जिसकी rows सीध में होनी चाहिए, वह grid है। कोई toolbar, filter chips का सेट, या ऐसी button row जिसमें कुछ सिरे पर धकेला गया हो, वह margin auto या space between के साथ flexbox है। ये आराम से एक दूसरे में बैठते हैं, तो मेरे ज़्यादातर components बाहर से grid होते हैं और हर cell के अंदर flex। जिस चीज़ का मैं लगातार इस्तेमाल करता हूं वह है auto fit और minmax के साथ repeat, क्योंकि इससे मुझे बिना एक भी media query के responsive card grid मिल जाता है: container सिकुड़ते ही columns खुद बह जाते हैं। दूसरी जानने लायक चीज़ subgrid है, क्योंकि वह card के अंदर की चीज़ों को सिर्फ हर card के भीतर नहीं, पूरे grid के आर पार सीध में लाने देती है।