सीएसएस ग्रिड में auto-fill का मतलब
ग्रिड कंटेनर के समान कॉलम का आकार सेट करने के लिए
repeat फ़ंक्शन में
auto-fill मान निर्दिष्ट करना बहुत सुविधाजनक है,
जिसकी बदौलत
हमारा कंटेनर समान कॉलम से भर जाएगा
हमें आवश्यक चौड़ाई के।
आइए आठ तत्वों की एक तालिका बनाएं और
प्रत्येक कॉलम की चौड़ाई 200px निर्धारित करें।
साथ ही, auto-fill मान स्वयं
आवश्यक कॉलम की संख्या की गणना करेगा:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
कॉलम की चौड़ाई 200px पर सेट करें।
पैरेंट की चौड़ाई बदलें और
देखें कि कॉलम की संख्या
कैसे बदलती है।
