प्रतिक्रियाशील वेब डिजाइन - ग्रिड व्यू

ग्रिड व्यू क्या है?

कई वेब पृष्ठ grid-view (grid-view) पर आधारित हैं, इसका मतलब है कि पृष्ठ कुछ स्तम्भों में विभाजित है:

वेब पृष्ठ का डिजाइन करते समय, ग्रिड व्यू का उपयोग करना बहुत मददगार होता है। इससे एलिमेंट को पृष्ठ पर आसानी से रखा जा सकता है。

प्रतिक्रियाशील ग्रिड व्यू आमतौर पर 12 स्तम्भ होते हैं, कुल चौड़ाई 100% और ब्राउज़र विंडो के आकार को समायोजित करते हैं और फिर फैलते हैं。

प्रतिक्रियाशील ग्रिड व्यू बनाना

हम एक प्रतिक्रियाशील ग्रिड व्यू बनाना शुरू करें।

पहले, सभी HTML एलिमेंट के box-sizing गुण को border-boxइससे यह सुनिश्चित होता है कि एलिमेंट का कुल चौड़ाई और ऊंचाई में अंतराल (पैडिंग) और बॉर्डर शामिल हैं。

CSS में निम्नलिखित कोड जोड़ें:

* {
  box-sizing: border-box;
}

हमारे CSS बॉक्स साइजिंग एक चैप्टर में box-sizing गुण के बारे में अधिक पढ़ें。

इस उदाहरण में, एक साधारण प्रतिक्रियाशील वेब पृष्ठ को दिखाया गया है जिसमें दो स्तम्भ हैं:

25%
75%

उदाहरण

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

स्वयं प्रयास कीजिए

यदि वेब पृष्ठ केवल दो स्तम्भों का होता है, तो उपरोक्त उदाहरण अच्छा है।

लेकिन, हम 12 स्तम्भ वाले प्रतिक्रियात्मक ग्रिड व्यू का उपयोग करना चाहते हैं, ताकि वेब पृष्ठ को बेहतर नियंत्रित किया जा सके.

पहले, हमें एक स्तम्भ की प्रतिशत की गणना करनी होगी: 100% / 12 स्तम्भ = 8.33%.

तो, हम 12 स्तम्भों में से हर स्तम्भ के लिए एक क्लास बनाते हैं, अर्थात class="col-" और एक संख्या के साथ, जो इस खंड को कितने स्तम्भों को क्रॉस देना है, इसका परिचय देता है:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

स्वयं प्रयास कीजिए

ये सभी स्तम्भ बाईं ओर फ्लोट करेंगे और 15px का आंतरिक घाटा लेंगे:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

हर पंक्ति को एक डिव द्वारा घेरा जाना चाहिए <div> में. अंतर्निहित स्तम्भों की संख्या कुल मिलाकर हमेशा 12 होनी चाहिए:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

सभी अंतर्निहित स्तम्भ बाईं ओर फ्लोट करते हैं, इसलिए वे पृष्ठ के प्रवाह से बाहर हो जाते हैं और अन्य तत्वों को रखते हैं, जैसे कि ये स्तम्भ मौजूद नहीं हैं. इससे बचने के लिए, हम फ्लोट की साफी करने वाले स्टाइल जोड़ेंगे:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

हम इसे सुंदर दिखाने के लिए कुछ और स्टाइल और रंग जोड़ना चाहते हैं:

उदाहरण

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

स्वयं प्रयास कीजिए

ध्यान दें कि जब आप ब्राउज़र विंडो को बहुत कम चौड़ा करें तो, उदाहरण के लिए वेबपेज को बहुत अच्छा नहीं दिखाई देता है।अगले चाप में, आपको यह समस्या कैसे हल करेंगे सीखने के लिए सीखा जाएगा。