CSS ग्रिड कंटेनर

1
2
3
4
5
6
7
8

अपने आप से प्रयास करें

ग्रिड कंटेनर

यदि आप चाहते हैं कि HTML एलीमेंट ग्रिड कंटेनर के रूप में काम करे, तो आपको display गुण को grid या inline-grid में सेट किया जाता है。

ग्रिड कंटेनर ग्रिड प्रोजेक्टों से बना है जो स्तम्भों और पंक्तियों के अंदर रखे गए हैं。

grid-template-columns गुण

grid-template-columns गुण ग्रिड लेआउट में स्तम्भ की संख्या को परिभाषित करता है और प्रत्येक स्तम्भ की चौड़ाई को निर्धारित कर सकता है。

यह मान अलग-अलग अंतराल से अलग-अलग की सूची है, जिसमें प्रत्येक मान को उससे संबंधित स्तम्भ की लंबाई को परिभाषित किया जाता है。

यदि आप चाहते हैं कि ग्रिड लेआउट 4 स्तम्भ वाला हो, तो इन 4 स्तम्भों की चौड़ाई को निर्धारित करें; यदि सभी स्तम्भ को एकसी चौड़ाई देनी है, तो "auto" में सेट करें。

इंस्टेंस

चार स्तम्भ वाला ग्रिड बनाएगा:

.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 गुण

grid-template-rows गुण प्रत्येक स्तम्भ की ऊंचाई को परिभाषित करता है。

1
2
3
4
5
6
7
8

इसका मान अलग-अलग अंतराल से अलग-अलग की सूची है, जिसमें प्रत्येक मान को उससे संबंधित पंक्ति की ऊंचाई को परिभाषित किया जाता है:

इंस्टेंस

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

अपने आप से प्रयास करें

justify-content गुण

justify-content गुण को कंटेनर के अंदर पूरे ग्रिड को जस्ता करने के लिए उपयोग किया जाता है。

1
2
3
4
5
6
7
8

ध्यान:ग्रिड की कुल चौड़ाई को कंटेनर की चौड़ाई से कम होना चाहिए, ताकि 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 गुण

align-content इस अट्रिब्यूट का उपयोग कंटेनर के अंदर पूरे ग्रिड को खिंचने के लिए है।

1
2
3
4
5
6
7
8

ध्यान:ग्रिड की कुल ऊंचाई को कंटेनर की ऊंचाई से कम होना चाहिए, ताकि 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;
}

अपने आप से प्रयास करें