CSS grid विशेषता

  • पिछला पृष्ठ gap
  • अगला पृष्ठ grid-area

वर्णन और उपयोग

grid गुण निम्नलिखित गुणों का लघुरूप है:

अन्य संदर्भः

CSS शिक्षा:CSS ग्रिड कंटेनर

उदाहरण

उदाहरण 1

तीन स्तम्भ ग्रिड लेआउट बनाएं, जिसमें पहली पंक्ति की ऊंचाई 150 पिक्सल हो

.grid-container {
  डिस्प्ले: ग्रिड;
  ग्रिड: 150पिक्सल / ऑटो ऑटो ऑटो;
}

स्वयं को प्रयोग करें

उदाहरण 2

दो पंक्तियाँ निर्धारित करें, जिसमें 'item1' पहले दो पंक्तियों के पहले दो स्तम्भों में फैला (पांच स्तम्भ ग्रिड लेआउट अपनाया):

.item1 {
  grid-area: माइएरिया;
}
.grid-container {
  डिस्प्ले: ग्रिड;
  ग्रिड:
    'माइएरिया माइएरिया ...'
    'माइएरिया माइएरिया ...';
}

स्वयं को प्रयोग करें

उदाहरण 3

सभी वस्तुओं का नाम दें और एक तैयार वेब टेम्पलेट बनाएं:

.item1 { grid-area: header; }
.item2 { grid-area: मेनू; }
.item3 { grid-area: मुख्य; }
.item4 { grid-area: दायाँ; }
.item5 { grid-area: footer; }
.grid-container {
  डिस्प्ले: ग्रिड;
  ग्रिड:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

स्वयं को प्रयोग करें

CSS व्याकरण

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

गुण मान

मान वर्णन
none मूलभूत मान. रोड या कॉलम के आकार को निर्धारित नहीं किया गया है。
grid-template-rows / grid-template-columns कॉलम और रोड के आकार को निर्धारित करें。
grid-template-areas नामक प्रतियोगिता का उपयोग करते हुए ग्रिड लेआउट निर्धारित करें。
grid-template-rows / grid-auto-columns इस गुण के द्वारा रोड के आकार (ऊंचाई) का निर्धारण करें, और कॉलम के ऑटोमेटिक आकार को निर्धारित करें。
grid-auto-rows / grid-template-columns इस गुण के द्वारा रोड के ऑटोमेटिक आकार को निर्धारित करें, और grid-template-columns गुण को निर्धारित करें。
grid-template-rows / grid-auto-flow grid-auto-columns इस गुण के द्वारा रोड के आकार (ऊंचाई) का निर्धारण करें, और ऑटोमेटिक लोकेशन करने के लिए एवं कॉलम के ऑटोमेटिक आकार को निर्धारित करें。
grid-auto-flow grid-auto-rows / grid-template-columns इस गुण के द्वारा ऑटोमेटिक लोकेशन के लिए प्रतियोगिता का निर्धारण करें, एवं रोड के ऑटोमेटिक आकार को निर्धारित करें, और grid-template-columns गुण को निर्धारित करें。
initial इस गुण को उसके मूलभूत मान पर निर्धारित करें. संदर्भः initial。
inherit इस गुण को उसके पिता एलेमेंट से विरासत करें. संदर्भः inherit。

तकनीकी विवरण

मूलभूत मान: none none none auto auto row
विरासत: नहीं
एनिमेशन निर्माण: हाँ, व्यक्तिगत गुणों को देखें. संदर्भःएनिमेशन संबंधी गुण。
संस्करण: CSS Grid Layout Module Level 1
JavaScript व्याकरण: object.style.grid="250px / auto auto auto"

ब्राउज़र समर्थन

तालिका में दिए गए नंबरों से प्रथम ब्राउज़र का समर्थन प्रदर्शित है जो इस गुण को पूरी तरह से समर्थित करता है。

च्रोम IE / एज फ़ायरफॉक्स साफ़री ओपेरा
57 16 52 10 44

अन्य संदर्भः

CSS संदर्भ पुस्तका:grid-template-areas गुण

CSS संदर्भ पुस्तका:grid-template-rows गुण

CSS संदर्भ पुस्तका:grid-template-columns गुण

CSS संदर्भ पुस्तका:grid-auto-rows गुण

CSS संदर्भ पुस्तका:grid-auto-columns गुण

CSS संदर्भ पुस्तका:grid-auto-flow गुण

CSS संदर्भ पुस्तका:grid-row-gap गुण

CSS संदर्भ पुस्तका:grid-column-gap गुण

  • पिछला पृष्ठ gap
  • अगला पृष्ठ grid-area