 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन ४४ सीखनेवाले हैं।
पिछले लेसन में हम ने CSS position के बारे में देखा है।
आज हम CSS grid model सीखेंगे।
CSS grid model
आज हम CSS grid model के बारे में सीखेंगे। CSS grid model की वेब पेज का layout करने में अहम् भूमिका होती है। हम पहले एक grid देखते हैं। निचे आकृति में एक grid दिखाया है। |
| आकृति ४४-१. Grid |
इस ग्रिड में ५ columns और ८ rows हैं। इस में पहले row और पहले column में पहला cell डिस्प्ले हुआ है। इस cell को हमने cell-1-1 नाम दिया है। वैसे ही हम cell-1-2, cell-1-3 वगैरह देख सकते है। पहले row में ५ सेल्स हैं। ऐसे ही हर एक row में पांच cells हैं। दूसरे row में cell-2-1, cell-2-2 वगैरह cells हैं।
CSS grid model हमें वेब पेज में ऐसा ही एक grid देता है। यह एक काल्पनिक ग्रिड होता है, लेकिन इसकी मदद से हम वेब पेज का लेआउट तय कर सकते हैं। हम यह बता सकते हैं की कौन से सेल में क्या डिस्प्ले करनेवाले हैं। हम हर एक सेल का साइज तय कर सकते हैं। अगर हम छोटे आकार के सेल्स बनाते हैं तो हमें ज्यादा सेल्स मिलते हैं और अगर बड़े आकार के सेल्स बनाते हैं तो कम सेल्स हैं। दो सेल्स को जुड़ाकर एक बड़ा सेल बना सकते हैं।
इस तरह CSS grid model का उपयोग करके हम float या positioning के बिना आसान तरीके के से वेब पेज का लेआउट बना सकते हैं। CSS grid model केवल latest वेब browsers में चलते हैं। पुराने versions में यह काम नहीं करते। हैं।
हम आज हमारे स्क्रिप्ट में CSS grid model का उपयोग करेंगे और वेब पेज में ग्रिड कैसा होता है।
एक नयी Notepad फाइल ओपन कीजिये। इस में हम ग्रिड बनाने के लिए कोड लिखेंगे और grid model के features के बारे में सीखेंगे। हम स्क्रिप्ट को simple रखने ताकि इन concepts पर हम ज्यादा ध्यान दे सके और हमें वह आसानी से समझ में आ जाये। हमारे फाइल में निचे दिया हुआ कोड लिखिए।
<html>
<head>
<style>
अब ग्रिड define करने के लिए CSS लिहिये। इस के लिए CSS display property का उपयोग करना पड़ता है।
#grid1 {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
CSS grid-template-columns प्रॉपर्टी यह बताती है की हमारे ग्रिड में ४ columns हैं और हर एक कॉलम 50px का है।
हम ग्रिड के हर एक सेल को लाल बॉर्डर देंगे। इस से हम सेल को पहचान सकेंगे। हम हर एक grid item का नंबर भी लिखेंगे। इसके लिए कोड ऐसा होगा।
.grid-item {
font-size: 30px;
border 5px solid red;
}
अब body में div का उपयोग करेंगे। यह division एक container होगा जिसमे ग्रिड items डिस्प्ले होंगे। इसके लिए कोड ऐसा होगा।
<div class="grid-container">
<div class="grid-item">Grid-item 1</div>
<div class="grid-item">Grid-item 2</div>
<div class="grid-item">Grid-item 3</div>
<div class="grid-item">Grid-item 4</div>
<div class="grid-item">Grid-item 5</div>
<div class="grid-item">Grid-item 6</div>
<div class="grid-item">Grid-item 7</div>
<div class="grid-item">Grid-item 8</div>
<div class="grid-item">Grid-item 9</div>
<div class="grid-item">Grid-item 10</div>
<div class="grid-item">Grid-item 11</div>
<div class="grid-item">Grid-item 12</div>
</div>
इस फाइल को "Lesson-44" और "Lesson-44.html" के नाम से save कीजिये।
 |
| आकृति ४४-२. CSS grid model |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ४४-३.. CSS grid model in Hindi |
आउटपुट में एक ग्रिड डिस्प्ले हुआ है। यहाँ हमने
grid-template-columns: auto auto auto auto;
दिया है। इसलिए सब columns एक width के डिस्प्ले हुए हैं। पहला cell parent element होता है और बाकि के सब child elements होते हैं।
Important Points:
१. CSS grid model वेब पेज में एक काल्पनिक ग्रिड देता है।२. यह वेब पेज का लेआउट करने में मदद करता है।
३. हम ग्रिड आइटम का साइज items को जोड़कर बड़ा कर सकते हैं।
लेसन ४३ लेसन ४५
