Build a blog with Grid and flexbox

Sep 13, 2025

कैसे करना है

पिछले दो से तीन साल ने लेआउट को छलांग और सीमाओं में आगे बढ़ाया है। अब जब इन आधुनिक तकनीकों में आधुनिक ब्राउज़र में ऐसा लगातार परिणाम होता है, तो आप वास्तव में अपने उत्पादन कोड के लिए उनका उपयोग कर सकते हैं। यदि आप सोच रहे हैं ब्लॉग को कैसे शुरू करना है , यह ट्यूटोरियल आपको दिखाएगा कि सीएसएस ग्रिड और लचीला बॉक्स मॉड्यूल, उर्फ ​​फ्लेक्सबॉक्स का उपयोग करके मानक ब्लॉग-स्टाइल लेआउट बनाने के लिए कितना आसान है। आप जो चाहते हैं उसके लिए बहुत मेहनत की तरह ध्वनि? हमारे गाइड पर एक नज़र डालें सर्वश्रेष्ठ मुफ्त ब्लॉगिंग प्लेटफॉर्म या एक शीर्ष का चयन करें वेबसाइट निर्माता । एक टीम के साथ काम करना? सर्वोत्तम तैनात करना घन संग्रहण प्रक्रिया को चिकनी रखने के लिए। [2 9]

सबसे पहले एचटीएमएल की मूल बातें पर तुरंत पुनः प्राप्त करें और अर्थात् कोड को आजमाने और लिखने के लिए क्यों अच्छा है। [2 9]

डेस्कटॉप और मोबाइल से अधिक

क्या आपने सफारी और फ़ायरफ़ॉक्स पर पाठक मोड देखा है? यह पता बार में एक आइकन है जो रेखांकित कागज की तरह दिखता है। यह आपके प्रस्तुत करेगा वेबसाइट लेआउट एक विकृति मुक्त, नंगे हड्डियों मोड में, ऐप्पल वॉच उपयोग जैसे डिवाइस की तरह। अधिक से अधिक डिवाइस वेब सामग्री तक पहुंच और प्रदर्शित कर रहे हैं - संभवतः क्रिसमस का बड़ा हिट अमेज़ॅन गूंज जैसे इंटरैक्टिव स्पीकर थे। [2 9]

इन विचारों के साथ, और निश्चित रूप से आपकी साइट की स्क्रीन पाठकों और इसी तरह की तरह काम करने की आवश्यकता है, आपके पृष्ठ की संरचना महत्वपूर्ण है। यदि आप बस उपयोग करते हैं & lt; div & gt; अपने सभी कंटेनर और यहां तक ​​कि बटन के लिए फिर आपके कोड को प्रस्तुत करने वाले डिवाइस नहीं जानते कि संदर्भ क्या है, और इसलिए किसी भी मूल कार्यक्षमता या सुविधाओं का उपयोग नहीं कर सकता है। [2 9]

01. बुनियादी पृष्ठ लेआउट प्रारंभ करें

हम नेविगेशन, एक हीरो ब्लॉक, मुख्य लेख, विशेष लेख ब्लॉक और एक पाद लेख के साथ एक शीर्षलेख शामिल करने के लिए एक बुनियादी वेबपृष्ठ बनाने जा रहे हैं। विचार यहां कई लोगों को देखना है प्रतिक्रियात्मक वेब डिज़ाइन तकनीक हम मीडिया क्वेरी या किसी भी सहायक जावास्क्रिप्ट का उपयोग किए बिना लागू कर सकते हैं। आप देख सकते हैं कि पृष्ठ के HTML को HTML5 टैग का उपयोग करके अलग-अलग अनुभागों में विभाजित किया गया है। हम उन्हें कक्षाएं भी जोड़ते हैं, क्योंकि पुराने ब्राउज़र को यह नहीं पता कि वे क्या हैं और उन्हें एक div के रूप में प्रस्तुत करते हैं। आइए पृष्ठ के शीर्ष पर शुरू करें और अपने तरीके से काम करें। हालांकि आपकी साइट पर मूल या जटिल, यह भी सोचने का समय भी है वेब होस्टिंग सेवा आपके लिए सही है। [2 9]

02. एक साइट हेडर बनाएं

[2 9]

साइट के शीर्षलेख में एक लोगो और नेविगेशन के लिए एक अनियंत्रित सूची शामिल है। हमें किसी भी रैपर या कंटेनर को बाईं ओर लोगो के साथ बाएं और नेविगेशन को एक ही पंक्ति में दाईं ओर रखने की आवश्यकता नहीं है। [2 9]

 & lt; हेडर क्लास = "हेडर" और जीटी;

& lt; img src = "छवियां / logo.png" / & gt;
& lt; नव & gt;
& lt; उल वर्ग = "एनएवी" & gt;
& lt; li & gt; & lt; a href = "#"
कक्षा = "सक्रिय" & gt; घर & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; के बारे में & lt; / a & gt; & lt; / li & gt;
& lit; li & gt; & lt; a href = "#" & gt; कुत्तों & lt; / a & gt; & lt; / li & gt;
& lit; li & gt; & lt; a href = "#" & gt; संपर्क & lt; / a & gt; & lt; / li & gt;
& lt; / उल & gt;
& lt; / nav & gt;
& lt; / हेडर और जीटी; 

03. एफआर इकाई का उपयोग करें

हमने हेडर को ग्रिड प्रदर्शित करने के लिए सेट किया, फिर उपयोग करें 'गेट-टेम्पलेट-कॉलम' हेडर में दो कॉलम सेट करने के लिए। हम उपयोग करते हैं फादर यूनिट यहां, जो एक आंशिक इकाई है - 1fr कंटेनर में उपलब्ध स्थान के बराबर होगी। इस उदाहरण में हम नेविगेशन को एक छोटे से छोटे क्षेत्र को भरने के लिए दे रहे हैं। [2 9]

 हेडर {
प्रदर्शन: ग्रिड;
ग्रिड-टेम्पलेट-कॉलम: 1.5fr 1fr;
संरेखित आइटम: केंद्र;
} 

04. साइट नेविगेशन जोड़ें

अब हम मेनू आइटम की सूची को लक्षित करते हैं। फिर से हम बारी & lt; उल & gt; एक ग्रिड कंटेनर में और वस्तुओं को कॉलम में ऑटोफिट के अंदर बताएं। यहाँ हम उपयोग करते हैं न्यूनतम अधिकतम यह सुनिश्चित करने के लिए कि कॉलम 100px से छोटा कभी नहीं हो सकता है, लेकिन यदि स्थान बड़ा है तो वे स्थान को 1fr के रूप में साझा कर सकते हैं। [2 9] [9 7] .nav { प्रदर्शन: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: दोहराएं (ऑटो-फिट, मिनमैक्स (100 पीएक्स, 1 एफआर)); ग्रिड-गैप: 10 पीएक्स; संरेखित आइटम: केंद्र; }

05. हीरो ब्लॉक बनाएं

[2 9]

पृष्ठ का अगला भाग मुख्य हीरो ब्लॉक है। पारंपरिक रूप से एक कंटेनर में लंबवत केंद्रित पाठ को सभी प्रकार के काम-आसपास की आवश्यकता होती है। सीएसएस ग्रिड या फ्लेक्स का उपयोग करके, यह वास्तव में सरल है। [2 9]

 & lt; अनुच्छेद और जीटी;
& lt; अनुभाग वर्ग = "हीरो" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / खंड & gt;
& lt; / अनुच्छेद & gt; 

06. केंद्र के लिए संरेखित करें

दो अक्षों पर संरेखित सीएसएस ग्रिड के रोटी और मक्खन का एक हिस्सा है। यहां, हम नायक कंटेनर को ग्रिड कंटेनर में बदल सकते हैं और फिर उपयोग कर सकते हैं संरेखित सामग्री (बाएं से दाएं) और औचित्य-सामग्री (ऊपर से नीचे) केंद्र में स्थिति के लिए। हम एक का उपयोग कर रहे हैं वीएच यूनिट यहां, जो नायक को व्यूपोर्ट ऊंचाई का 50% ब्लॉक करेगा। [2 9] [9 7]। हेरो { न्यूनतम ऊंचाई: 50 वीएच; प्रदर्शन: ग्रिड; औचित्य-आइटम: केंद्र; संरेखित सामग्री: केंद्र; औचित्य-सामग्री: केंद्र; }

07. मुख्य सामग्री अनुभाग बनाएँ

मुख्य लेख में एक ब्लॉक भी है जिसमें आगे पढ़ने में शामिल है। मीडिया क्वेरी का उपयोग किए बिना इस उत्तरदायी को बनाने के लिए, हम अपने अधिकांश गुणों को बनाने के लिए फ्लेक्सबॉक्स पर स्विच कर सकते हैं। [2 9]

 & lt; अनुच्छेद वर्ग = "मुख्य सामग्री" & gt;
& lt; अनुभाग / & gt;
& lt; / खंड & gt;
& lt; अलग / & gt;
& lt; / अनुच्छेद & gt; 

08. दो-कॉलम व्यू जोड़ें

लेख को एक फ्लेक्स कंटेनर में सेट करें। यह सुनिश्चित करने के लिए बाईं ओर थोड़ा पैडिंग जोड़ें और यह सुनिश्चित करने के लिए कि पाठ का माप बहुत लंबा नहीं हो जाता है। फ्लेक्स दिशा पंक्ति है ताकि स्टाइल के दौरान अनुभाग और एक तरफ एक दूसरे के बगल में बैठे। सामग्री के बीच अंतरिक्ष के लिए उचित है कि पाठ अलग-अलग के खिलाफ छूएगा। [2 9] [9 7] मुख्य सामग्री { प्रदर्शन: फ्लेक्स; फ्लेक्स-लपेटें: लपेटें; फ्लेक्स-दिशा: पंक्ति; औचित्य-सामग्री: अंतरिक्ष के बीच; पैडिंग: 0 5VW 0 5VW;}

09. मीडिया प्रश्नों के बिना इसे उत्तरदायी बनाएं

[2 9]

यह अनुभाग कैल्क और न्यूनतम और अधिकतम चौड़ाई का एक चतुर मिश्रण का उपयोग करता है ताकि हमें प्रभावी रूप से मीडिया क्वेरी हो लेकिन कंटेनर स्तर पर। जब पर्याप्त जगह होती है तो अनुभाग में 70% माता-पिता होते हैं, जिससे अलग-अलग बैठने में मदद मिलती है। चौड़ाई के लिए कैल्क का उपयोग करके, हम या तो एक विशाल या छोटी चौड़ाई वापस कर सकते हैं। [2 9] [9 7] मुख्य सामग्री अनुभाग { न्यूनतम चौड़ाई: 70%; चौड़ाई: कैल्क ((48em - 100%) * 1000); अधिकतम चौड़ाई: 100%; }

10. एक ब्रेक पॉइंट को परिभाषित करें

48em 768px (48 * बेस फ़ॉन्ट आकार (16px)) के बराबर है, इसलिए 768px से ऊपर अनुभाग इसकी न्यूनतम चौड़ाई 70% और 768 से नीचे अधिकतम चौड़ाई का उपयोग किया जाएगा। हम एक तरफ के लिए भी ऐसा ही करते हैं, इसलिए इस मामले में यह या तो बड़ी स्क्रीन पर 25% या छोटे पर 100% होगा। प्रभाव एक उत्तरदायी विराम बिंदु है जो पूरी तरह से कंटेनर को प्रभावित करता है। [2 9] [9 7] .मेन-सामग्री एक तरफ { न्यूनतम चौड़ाई: 25%; चौड़ाई: कैल्क ((48em - 100%) * 1000); अधिकतम चौड़ाई: 100%; }

11. उत्तरदायी ब्लॉक बनाएं

[2 9]

पृष्ठ पर चलाने वाले फीचर्ड आइटम बनाने के लिए, हम अंततः हमारे पहले कंटेनर divs का उपयोग करते हैं। [2 9]

 & lt; अनुभाग वर्ग = "कार्ड-सूची" & gt;
& lt; div class = "कार्ड" & gt;
& lt; img / & gt;
& lt; div class = "कार्ड-विवरण" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / खंड & gt; 

12. दोहराएं और ऑटोफिट

हमारी कार्ड सूची के लिए हम एक पंक्ति में चार चाहते हैं, लेकिन क्योंकि हम किसी भी मीडिया क्वेरी का उपयोग नहीं कर रहे हैं, हमने अपना सेट किया है न्यूनतम अधिकतम मूल्य 300px, जो एक छोटे से मोबाइल पर अच्छी तरह से फिट होगा। दोहराने और ऑटोफिट का उपयोग करके ब्राउज़र कड़ी मेहनत करता है और यह एक पंक्ति में क्या हो सकता है और फिर दूसरा शुरू कर सकता है, इसलिए हम चार से एक पंक्ति के साथ एक कॉलम लेआउट तक चार से जा सकते हैं। [2 9] [9 7]। कार्ड-सूची { प्रदर्शन: ग्रिड; ग्रिड-गैप: 10 पीएक्स; ग्रिड-टेम्पलेट-कॉलम: दोहराएं (ऑटो-फिट, मिनमैक्स (300 पीएक्स, 1 एफआर)); } .card { प्रदर्शन: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: 1fr; }

13. एक कार्ड लेआउट बनाएँ

कार्ड में विवरण के लिए हम फ्लेक्स पर वापस स्विच करते हैं, प्रवाह को कॉलम पर सेट करते हैं ताकि आइटम लंबवत प्रवाह करें। ठीक औचित्य-सामग्री सूट करने के लिए संपत्ति - इस मामले में अंतरिक्ष-समान रूप से अच्छा काम करता है। चूंकि इस पैनल में 'ए' टैग ब्लॉक प्रदर्शित करेगा, यह कंटेनर की चौड़ाई फैल जाएगा। इसे सेट करें फ्लेक्स-स्टार्ट ताकि यह केवल अपनी सामग्री का स्थान लेता है। [2 9] [9 7]। कार्ड-विवरण { प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: कॉलम; औचित्य-सामग्री: अंतरिक्ष समान रूप से; } .card-विवरण { संरेखित-स्व: फ्लेक्स-स्टार्ट; }

14. फूटर स्टाइल

हम पहले से ही पाद के लिए नीचे हैं, और बस कुछ शैलियों को नियोजित करेंगे जिन्हें हमने पहले इसे बाहर करने के लिए पहले उपयोग किया था। [2 9]

 & lt; पाद लेख वर्ग = "पाद लेख" & gt;
& lt; p / & gt;
& lt; नव & gt;
& lt; उल वर्ग = "एनएवी" & gt;
& lt; li / & gt;
& lt; / उल & gt;
& lt; / nav & gt;
& lt; उल वर्ग = "सामाजिक" & gt;
& lt; li / & gt;
& lt; / उल & gt;
& lt; / पाद लेख और जीटी; 

15. बच्चे के आइटम को संरेखित करें

इस पाद लेख में तीन क्षेत्र हैं। प्रत्येक को एक आंशिक इकाई में तीन दोहराने के लिए अपने ग्रिड कॉलम सेट करें। आप बस 'ग्रिड-टेम्पलेट-कॉलम: 1fr 1fr 1fr' लिख सकते हैं; आपको पसंद होने पर। सामाजिक आइकन दाईं ओर गठबंधन करने जा रहे हैं - आप इसे सही उपयोग करने के लिए आइटम को बताकर कर सकते हैं औचित्य-स्व । [2 9] [9 7] .footer { प्रदर्शन: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: दोहराएं (3, 1 एफआर); ग्रिड-ऑटो-फ्लो: कॉलम; संरेखित आइटम: केंद्र; } ।सामाजिक { औचित्य-आत्म: अंत; }

16. संगतता पर विचार करें

हालांकि यह ट्यूटोरियल बड़े तीन ब्राउज़रों और आधुनिक उपकरणों में अच्छी तरह से काम करता है, लेकिन इसका परीक्षण आईई में नहीं किया गया है। आपकी परियोजना के आधार पर, आप प्रगतिशील वृद्धि का उपयोग कर सकते हैं और एक साधारण लेआउट की सेवा कर सकते हैं। यदि आपका सीएसएस एसएएसएस की तरह प्रीप्रोसेसर का उपयोग करके बनाया गया है तो ऑटोप्रेफिक्सर पैकेज किनारे की पसंद के लिए आवश्यक अतिरिक्त उपसर्ग प्रदान करता है। [2 9]

[23 9] यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 284 में प्रकाशित किया गया था

[23 9] वेब डिजाइनर [23 9] । [23 9] यहां अंक 284 खरीदें [23 9] या [23 9] वेब डिजाइनर की सदस्यता लें [23 9] । [2 9]

संबंधित आलेख: [2 9]

• सीएसएस ग्रिड का उपयोग करने के लिए एक व्यापक गाइड
• एक उत्तरदायी इंटरफ़ेस बनाने के लिए सीएसएस ग्रिड और फ्लेक्सबॉक्स का उपयोग करें
• 5 कूल सीएसएस ग्रिड जेनरेटर

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

44 of the best iPad shortcuts and gestures for iPadOS 2020

कैसे करना है Sep 13, 2025

(छवि क्रेडिट: भविष्य) [1 9] पर कूदना: ..

---

ग्रेव सीएमएस के साथ शुरू करें

कैसे करना है Sep 13, 2025

(छवि क्रेडिट: भविष्य) [1 9] ग्रेव एक अंतर प्रबंध..

---

How to draw an elephant

कैसे करना है Sep 13, 2025

पृथ्वी पर सबसे बड़ी जीवित भूमि स्तनपायी, हाथियों के पास काफ..

---

Create a tiles material in Substance Designer

कैसे करना है Sep 13, 2025

पदार्थ डिजाइनर आपके लिए सभी प्रकार की सामग्री बन�..

---

Create a multi-exposure image with Adobe CC

कैसे करना है Sep 13, 2025

एडोब ने मुझे बहुउंडलवाद की अवधारणा को व्यक्त करने के लिए एक उदाहरण बनाने ..

---

Master the science of conversion rate optimisation

कैसे करना है Sep 13, 2025

रूपांतरण दर अनुकूलन (सीआरओ) मौजूदा यातायात से रूप..

---

The ultimate guide to compositing images in Photoshop

कैसे करना है Sep 13, 2025

सभी फ़ोटोशॉप परियोजनाओं में से एक शानदार फ्रेम म�..

---

Develop your caricature skills

कैसे करना है Sep 13, 2025

जब मैंने कुछ साल पहले अंशकालिक फ्रीलांस इलस्ट्र�..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers