सीएसएस ग्रिड कंटेनर
1
2
3
4
5
6
7
8
ग्रिड कंटेनर
एक HTML तत्व को ग्रिड कंटेनर के रूप में व्यवहार करने के लिए, आपको displayसंपत्ति को
gridया पर सेट करना होगा inline-grid।
ग्रिड कंटेनर में ग्रिड आइटम होते हैं, जिन्हें कॉलम और पंक्तियों के अंदर रखा जाता है।
ग्रिड-टेम्पलेट-कॉलम संपत्ति
गुण आपके ग्रिड लेआउट में स्तंभों की grid-template-columnsसंख्या को परिभाषित करता है, और यह प्रत्येक स्तंभ की चौड़ाई को परिभाषित कर सकता है।
मान एक स्पेस-सेपरेटेड-लिस्ट है, जहां प्रत्येक मान संबंधित कॉलम की चौड़ाई को परिभाषित करता है।
यदि आप चाहते हैं कि आपके ग्रिड लेआउट में 4 कॉलम हों, तो 4 कॉलम की चौड़ाई निर्दिष्ट करें, या "ऑटो" यदि सभी कॉलम की चौड़ाई समान होनी चाहिए।
उदाहरण
4 कॉलम के साथ ग्रिड बनाएं:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
नोट: यदि आपके पास 4 कॉलम ग्रिड में 4 से अधिक आइटम हैं, तो आइटम को डालने के लिए ग्रिड स्वचालित रूप से एक नई पंक्ति जोड़ देगा।
संपत्ति का grid-template-columnsउपयोग स्तंभों के आकार (चौड़ाई) को निर्दिष्ट करने के लिए भी किया जा सकता है।
उदाहरण
4 कॉलम के लिए एक आकार सेट करें:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
ग्रिड-टेम्पलेट-पंक्तियाँ संपत्ति
संपत्ति प्रत्येक पंक्ति की grid-template-rowsऊंचाई को परिभाषित करती है।
1
2
3
4
5
6
7
8
मान एक स्थान-पृथक-सूची है, जहां प्रत्येक मान संबंधित पंक्ति की ऊंचाई को परिभाषित करता है:
उदाहरण
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
औचित्य-सामग्री संपत्ति
संपत्ति का justify-contentउपयोग कंटेनर के अंदर पूरे ग्रिड को संरेखित करने के लिए किया जाता है।
1
2
3
4
5
6
नोट:justify-content संपत्ति के किसी भी प्रभाव के लिए ग्रिड की कुल चौड़ाई कंटेनर की चौड़ाई से कम होनी चाहिए ।
उदाहरण
.grid-container {
display: grid;
justify-content: space-evenly;
}
उदाहरण
.grid-container {
display: grid;
justify-content: space-around;
}
उदाहरण
.grid-container {
display: grid;
justify-content: space-between;
}
उदाहरण
.grid-container {
display: grid;
justify-content: center;
}
उदाहरण
.grid-container {
display: grid;
justify-content: start;
}
उदाहरण
.grid-container {
display: grid;
justify-content: end;
}
संरेखण-सामग्री संपत्ति
align-contentसंपत्ति का उपयोग कंटेनर के अंदर पूरे ग्रिड को लंबवत रूप से संरेखित
करने के लिए किया जाता है।
1
2
3
4
5
6
नोट:align-content संपत्ति के किसी भी प्रभाव के लिए ग्रिड की कुल ऊंचाई कंटेनर की ऊंचाई से कम होनी चाहिए ।
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
उदाहरण
.grid-container {
display: grid;
height: 400px;
align-content: end;
}