जब मैं अपने कंटेनर की चौड़ाई बढ़ाता हूं तो मेरा कॉलम गैप छोटा क्यों हो जाता है?
मुझे मल्टी-कॉलम लेआउट में कॉलम गैप के पीछे के तर्क को समझने में कठिन समय हो रहा है। इस फिडेल में निम्नलिखित HTML / CSS हैं :
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
.flex-container {
height: 500px;
width: 300px;
border: 1px solid blue;
columns: 120px;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
width: 100px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
आप देखेंगे कि यदि आप width
कंटेनर को 300px से 400px तक बदलते हैं , तो स्तंभों के बीच का अंतर वास्तव में सिकुड़ जाता है।
यह ऐसा क्यों कर रहा है? क्या स्तंभों को बाएं-संरेखित करना संभव है ताकि वे चारों ओर न घूमें? CSS कॉलम के बीच निश्चित अंतराल सुझाव दे सकता है कि यह संभव नहीं है।
जवाब
कॉलम लेआउट थोड़ा मुश्किल है। यदि आप पढ़ column-width
सकते हैं कि आप से संबंधित विनिर्देश पा सकते हैं:
इष्टतम कॉलम चौड़ाई का वर्णन करता है। वास्तविक कॉलम की चौड़ाई व्यापक हो सकती है (उपलब्ध स्थान को भरने के लिए), या संकरा (केवल यदि उपलब्ध स्थान निर्दिष्ट कॉलम चौड़ाई से छोटा है)। संदर्भ
तत्वों से चौड़ाई निकालें और इसे नोटिस करने के लिए कंटेनर का आकार बदलें:
.flex-container {
width: 400px;
border: 1px solid blue;
columns: 120px;
padding: 10px;
overflow:hidden;
resize:horizontal;
}
.flex-item {
background: OliveDrab;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
आप देखेंगे कि अंतर वास्तव में तय हो गया है लेकिन स्तंभों की चौड़ाई बदल रही है।
आप एल्गोरिथ्म के बारे में अधिक जानकारी यहाँ पा सकते हैं: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm
एक समाधान सीएसएस ग्रिड के उपयोग पर विचार करना है जिसमें निश्चित स्तंभ चौड़ाई है। चाल ग्रिड स्तंभ की चौड़ाई को स्तंभ के अंतर + चौड़ाई के बराबर होने के लिए परिभाषित करने के लिए है और आप कंटेनर को सभी स्तंभों को भरते हैं (इसकी चौड़ाई अंतर + कॉलम की चौड़ाई का गुणक होगा )
परिणाम देखने के लिए स्क्रीन का आकार बदलें:
.container {
display:grid;
grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
overflow: hidden;
resize: horizontal;
border: 1px solid blue;
}
.flex-container {
grid-column:1/-1;
column-width: 120px;
column-gap: 20px;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="container">
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
</div>
यदि आप एक कॉलम-काउंट (स्तंभों के लिए दूसरा पैरामीटर) निर्दिष्ट नहीं करते हैं, तो सिस्टम स्तंभों की संख्या को संभव करेगा (यानी यह कॉलम-गिनती पैरामीटर के रूप में ऑटो लेता है)।
आपने 120px की 'आदर्श' कॉलम चौड़ाई निर्दिष्ट की है और वास्तविक वस्तुओं की चौड़ाई उससे कम है। इसलिए सिस्टम को लगता है कि आप चौड़ाई 400px के कंटेनर में 3 कॉलम प्राप्त कर सकते हैं और पहले दो को तदनुसार छोड़ सकते हैं।
यहाँ से कुछ जानकारी है https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
स्तंभ-चौड़ाई CSS गुण एक बहु-स्तंभ लेआउट में आदर्श स्तंभ चौड़ाई सेट करता है। कंटेनर में जितने भी कॉलम होंगे, उनमें से कोई भी बिना कॉलम-चौड़ाई के मूल्य से कम चौड़ाई के हो सकते हैं। यदि कंटेनर की चौड़ाई निर्दिष्ट मान से कम है, तो एकल कॉलम की चौड़ाई घोषित कॉलम चौड़ाई से छोटी होगी।
यदि आप यह सुनिश्चित करना चाहते हैं कि सिर्फ दो कॉलम हैं तो दूसरा पैरामीटर दें:
columns: 120px 2;
.flex-container {
height: 500px;
width: 400px;
border: 1px solid blue;
columns: 120px 2;
padding: 10px;
}
.flex-item {
background: OliveDrab;
padding: 5px;
width: 100px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
break-inside: avoid-column;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>