How to build complex layouts using CSS

Sep 14, 2025

कैसे करना है

वेब के लिए लेआउट हमेशा सीमित रहा है, वास्तव में एक प्रारूप में प्रदर्शित करने के लिए सामग्री को आसान बनाने के लिए वास्तव में कुछ भी नहीं किया गया है जो समझ में आता है।

9 0 के दशक में जब वेब ने पहली बार पकड़ लिया, डिजाइनर जो ग्रिड पर सामग्री डालने के लिए उपयोग किए जाते थे, ने ब्राउज़र में एक ही परिणाम प्राप्त करने का एकमात्र तरीका पाया था। विलय कोशिकाओं के नेतृत्व में जटिल वेबसाइट लेआउट , लेकिन इसने अभिगम्यता और एसईओ के साथ विनाश खेला। तेजी से आगे और आज फ्लोट, लचीला बक्से और इतने पर सामग्री रखने के सभी तरीके हैं।

। इसके लिए एचटीएमएल लेआउट में पांच डीआईवी टैग हैं, जिन्हें सीएसएस कक्षाओं के रूप में आइटम 1-5 का नाम दिया गया है। ये ग्रिड में रखी गई सामग्री होगी। कंटेनर लपेटना यह ग्रिड को परिभाषित करेगा, जिसमें चार कॉलम होंगे।

 & lt; div class = "कंटेनर" & gt;
  & lt; div class = "item1" & gt; आइटम 1 & lt; / div & gt;
  & lt; div class = "item2" & gt; आइटम 2 & lt; / div & gt;
  & lt; div class = "item3" & gt; आइटम 3 & lt; / div & gt;
  & lt; div class = "item4" & gt; आइटम 4 & lt; / div & gt;
  & lt; div class = "item5" & gt; आइटम 5 & lt; / div & gt;
& lt; / div & gt; 

02. ग्रिड के लिए CSS की जाँच करें

हेड सेक्शन में देखकर आप देख सकते हैं कि 'कंटेनर' को पंक्तियों के लिए ऑटो ऊंचाई के साथ ग्रिड के रूप में निर्धारित किया गया है, जबकि कॉलम को प्रत्येक सेट के साथ चार पर 25 प्रतिशत पर सेट किया जाना है । इसे ब्राउज़र में जांचें और आप देखेंगे कि प्रत्येक आइटम को स्वचालित रूप से अगली उपलब्ध ग्रिड स्थिति असाइन की जाती है।

। कंटेनर {
  प्रदर्शन: ग्रिड;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: दोहराएं (4, 25%); } 

03. ग्रिड पदों को परिभाषित करें

अब 'grid2.html' फ़ाइल पर एक नज़र डालें। यह पहली फ़ाइल के समान है, 'आइटम 1' और 'आइटम 2' को छोड़कर विशिष्ट पदों को दिए जाते हैं। पहला पंक्ति 1 में स्थित है और पंक्ति 2 से पहले समाप्त होता है। कॉलम 1 से शुरू होता है और 3 पर समाप्त होता है, इसलिए यह दो कॉलम फैलाता है। दूसरा कॉलम 3 पर शुरू होता है और अगले दो कॉलम लेता है। शेष आइटम अगले उपलब्ध ग्रिड स्लॉट भरें।

 .Tem1 {
  ग्रिड-पंक्ति-प्रारंभ: 1;
  ग्रिड-पंक्ति-अंत: 2;
  ग्रिड-कॉलम-प्रारंभ: 1;
  ग्रिड-कॉलम-एंड: 3;
}
.tem2 {
  ग्रिड-पंक्ति-प्रारंभ: 1;
  ग्रिड-पंक्ति-अंत: 2;
  ग्रिड-कॉलम-प्रारंभ: 3;
  ग्रिड-कॉलम-एंड: 5;
} 

04. ग्रिड टेम्पलेट का उपयोग करें

'Grid3.html' खोलें और HTML के शरीर को देखें। आप देखेंगे कि हेडर, साइडबार, मुख्य सामग्री अनुभाग और एक पाद लेख के साथ एक लेआउट है। आप यह देखने के लिए सामग्री में अधिक टेक्स्ट जोड़ सकते हैं कि यह कब चालू होता है। ग्रिड इन वर्गों को एक लेआउट में बनाने के लिए एक टेम्पलेट सुविधा का उपयोग करेगा।

 & lt; div class = "कंटेनर" & gt;
  & lt; div class = "हेडर" & gt; हेडर & lt; / div & gt;
  & lt; div class = "साइडबार" & gt; साइडबार & lt; / div & gt;
  & lt; div class = "सामग्री" & gt; सामग्री & lt; / div & gt;
  & lt; div class = "पाद लेख" & gt; पाद लेख & lt; / div & gt;
& lt; / div & gt; 

05. टेम्पलेट को परिभाषित करें

कंटेनर के लिए सीएसएस देखें। इसे फिर से एक ग्रिड के रूप में परिभाषित किया गया है। शीर्ष पंक्ति 200 पीएक्स उच्च होगी, मध्य स्वचालित आकार का होगा और अंतिम पंक्ति 100 पीएक्स उच्च होगी। कॉलम 33 प्रतिशत चौड़े और बाकी को ऑटोफिल करने के लिए तैयार हैं। टेम्पलेट बताता है कि हेडर दोनों स्तंभों को भर देगा। अगली पंक्ति पहले कॉलम और अगले में सामग्री में साइडबार होगी। पाद लेख दोनों में चला जाता है।

। कंटेनर {
  प्रदर्शन: ग्रिड;
  ग्रिड-टेम्पलेट-पंक्तियां: 200 पीएक्स ऑटो 100 पीएक्स;
  ग्रिड-टेम्पलेट-कॉलम: 33% ऑटो;
  ग्रिड-टेम्पलेट-क्षेत्र:
  "हेडर हेडर"
  "साइडबार सामग्री"
  "पाद लेख"; } 

06. टेम्पलेट को कक्षा में लिंक करें

कक्षा को टेम्पलेट में लिंक करने के लिए, यहां दिखाए गए कोड को परिभाषित करता है। प्रत्येक ग्रिड क्षेत्र का नाम दिया गया है और लिंक बनाया गया है। सामग्री यहां नहीं दिखाई गई है, लेकिन यह 'grid3.html' दस्तावेज़ में है। ग्रिड के लेआउट को देखने के लिए इसे ब्राउज़र में देखें। चूंकि दो कॉलम परिभाषित किए जाते हैं, टेम्पलेट को प्रत्येक उल्टे अल्पविराम में दो क्षेत्रों की आवश्यकता होती है।

 .हेडर {
  ग्रिड-क्षेत्र: शीर्षलेख;
}
.sidebar {
  ग्रिड-क्षेत्र: साइडबार;
}
.footer {
  ग्रिड क्षेत्र: पाद लेख; } 

07. इसे उत्तरदायी बनाएं

'Grid3.html' उत्तरदायी बनाने के लिए, एक मीडिया क्वेरी डाली जाती है और शीर्ष पंक्ति 200 प्रतिशत पर रखी जाती है, जबकि शेष पंक्तियों को स्वचालित रूप से आकार दिया जाएगा। केवल एक कॉलम, पूर्ण चौड़ाई है, इसलिए लेआउट को परिभाषित करने के लिए टेम्पलेट में प्रत्येक उल्टा अल्पविराम में एक शब्द होता है। इन्हें आसानी से किसी भी HTML को स्थानांतरित किए बिना पुन: व्यवस्थित किया जा सकता है।

 @media स्क्रीन और (अधिकतम चौड़ाई: 699px) {
  .container {
  प्रदर्शन: ग्रिड;
  ग्रिड-टेम्पलेट-पंक्तियां: 200 पीएक्स ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 100%;
  ग्रिड-टेम्पलेट-क्षेत्र: "हेडर" "साइडबार" "सामग्री" "पाद लेख";
  }
} 

08. एक वास्तविक लेआउट पर काम करें

अब 'index.html' खोलें - सामग्री के लिए सभी HTML पहले से ही बनाया गया है, जैसा कि डिजाइन तत्वों के लिए कुछ सीएसएस है। इस ग्रिड को हेड सेक्शन में स्टाइल टैग में जोड़ें। ऐसा करने से प्रत्येक खंड के लिए टेम्पलेट के साथ तीन-कॉलम ग्रिड बनाता है। खाली ग्रिड अनुभागों के लिए पूर्ण-स्टॉप पर ध्यान दें।

। Container1 {
  चौड़ाई: 80%;
  मार्जिन: 0 ऑटो;
  प्रदर्शन: ग्रिड;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 33.3% 33.3% ऑटो;
  ग्रिड-टेम्पलेट-क्षेत्र: "हेडर हेडर हेडर" "। स्टैंडफर्स्ट स्टैंडफर्स्ट" "। अनुच्छेद 1" "फोकस पुलक्वोट पुलक्वोट" "अनुच्छेद 2 अनुच्छेद 2।";
} 

09. टेम्पलेट को लिंक करें

पिछले चरण के साथ, यह शीर्षलेख को टेम्पलेट के साथ जोड़ता है। हेडर को ग्रिड के सभी तीन कॉलम फैलाने के लिए कहा जाता है, फिर स्टैंडफर्स्ट दो कॉलम लेने के लिए सेट होता है और बाईं ओर एक खाली कॉलम होता है। यदि आप ब्राउज़र की जांच करते हैं, तो कॉलम भरा हुआ है क्योंकि शेष सामग्री अगले उपलब्ध स्थान को ऑटोफिल करती है - हालांकि यह सब स्थापित होने पर ऐसा नहीं करेगी।

 .हेडर {
  ग्रिड-क्षेत्र: शीर्षलेख;
}
.standfirst {
  ग्रिड क्षेत्र: स्टैंडफर्स्ट;
} 

10. अगले क्षेत्रों को जोड़ें

अब पहला लेख, पुल उद्धरण और फोकस छवि को डिजाइन में रखा गया है। पुल उद्धरण और छवि एक ही पंक्ति पर तरफ की तरफ हैं। इस चरण में, अनुच्छेद 2 को रखा नहीं गया है, इसलिए यह ग्रिड पर पहली उपलब्ध स्थान ले रहा है जो स्टैंडफर्स्ट के बगल में है।

। Article1 {
  ग्रिड क्षेत्र: अनुच्छेद 1;
}
। Pullquote {
  ग्रिड क्षेत्र: पुलक्वोट;
}
.focus {
  ग्रिड क्षेत्र: फोकस;
  पाठ-संरेखण: केंद्र; } 

[14 9]

11. पहला ग्रिड समाप्त करें

दूसरे लेख के सीएसएस को जोड़ने से पहले सभी ग्रिड को सही तरीके से रखा जा सके। ब्राउज़र में इसे देखकर दिखाएगा कि लेआउट पृष्ठभूमि छवि के साथ काम करता है और पत्रिकाओं में देखे गए लेआउट का प्रकार बनाता है, जहां डिजाइनर एक बड़ी पृष्ठभूमि छवि के आसपास काम करता है।

 .article2 {
    ग्रिड-क्षेत्र: अनुच्छेद 2;
    कॉलम-गैप: 65 पीएक्स;
    कॉलम-गणना: 2;
} 

12. एक सफेद पृष्ठभूमि जोड़ें

दूसरा ग्रिड शुरू करने से पहले, आप सोच सकते हैं कि दो ग्रिड की आवश्यकता क्यों है। कारण यह है कि इस ग्रिड में एक सफेद पूर्ण चौड़ाई पृष्ठभूमि होगी, इसलिए यह सीएसएस दूसरा ग्रिड लपेट देगा। यह इस खंड को डिजाइन में दूसरे पृष्ठ की भावना देना है।

 .Whitebg {
    पैडिंग: 100 पीएक्स 0;
    पृष्ठभूमि-रंग: #DDD;
} 

13. एक दूसरा ग्रिड बनाओ

दूसरा ग्रिड पहले से सरल है। पंक्तियों पर एक स्वचालित ऊंचाई के साथ तीन कॉलम हैं। सामग्री प्रत्येक कॉलम भरने जा रही है, इसलिए टेम्पलेट क्षेत्रों को परिभाषित करने की कोई आवश्यकता नहीं है। हालांकि, जब टैबलेट डिज़ाइन जोड़ा जाता है, तो इसे दो कॉलम पर स्विच करने की आवश्यकता होती है, इसलिए एक रिफ्लो की आवश्यकता होती है और नाम महत्वपूर्ण होंगे।

। Container2 {
    चौड़ाई: 80%;
    मार्जिन: 0 ऑटो;
    प्रदर्शन: ग्रिड;
    ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
    ग्रिड-टेम्पलेट-कॉलम: 33.3% 33.3% ऑटो;
    ग्रिड-टेम्पलेट-क्षेत्र: "आईएमजी 1 आईएमजी 2 अनुच्छेद 3";
} 

14. कॉलम जोड़ें

दूसरे ग्रिड में प्रत्येक सीएसएस कक्षाओं को ग्रिड टेम्पलेट में परिभाषित प्रासंगिक कॉलम के साथ लिंक करने के लिए कहा जाता है। इस खंड की हल्की पृष्ठभूमि के खिलाफ इसे बाहर करने के लिए लेख टेक्स्ट रंग बदल दिया गया है। केवल पाद लेख को पूरा करने के साथ, पत्रिका-शैली के लेआउट का डिज़ाइन लगभग जगह पर है।

 .IMG1 {
  ग्रिड-क्षेत्र: img1;
}
.img2 {
    ग्रिड-क्षेत्र: IMG2;
}
.article3 {
  ग्रिड-क्षेत्र: अनुच्छेद 3;
  रंग: # 333;
} 

15. पृष्ठ का पैर सही

पृष्ठ को खत्म करना स्क्रीन पर एक पूर्ण चौड़ाई div होगा, जो एक काले रंग से भरा जाएगा और पाठ अभी केंद्रित है। यह डिज़ाइन के डेस्कटॉप संस्करण को पूरा करता है, लेकिन स्क्रीन को 1200px चौड़ा से नीचे ले जाएं और साइट टूटने लगती है।

 .footer {
    पृष्ठभूमि-रंग: # 000;
    रंग: # 999;
    पाठ-संरेखण: केंद्र;
    पैडिंग: 50 पीएक्स 20 पीएक्स 100 पीएक्स;
} 

16. मध्यम स्क्रीन डिजाइन के लिए समायोजित करें

डिज़ाइन की देखभाल के लिए यहां एक मीडिया क्वेरी डाली जाती है जब ब्राउज़र की चौड़ाई 1200px से कम होती है। 17 और 18 के लिए कोड को ब्रैकेट के अंदर रखा जाएगा जहां टिप्पणी है। यह दोनों ग्रिड की लेआउट संरचना को बदलने का मामला होगा।

 @media स्क्रीन और (अधिकतम चौड़ाई: 1200px) {
  / * कोड यहाँ * /
} 

17. पहले ग्रिड को रिफ्लो करें

पहला ग्रिड अब ब्राउज़र की पूर्ण चौड़ाई को तीन के बजाय केवल दो कॉलम के साथ भरने के लिए तैयार है। अनुभागों का क्रम टेम्पलेट में रखा गया है, लेख स्विचिंग पक्षों के साथ, क्योंकि यह इस स्क्रीन आकार पर पृष्ठभूमि छवि के साथ बेहतर फिट बैठता है।

। Container1 {
  चौड़ाई: 100%;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 50% 50%;
  ग्रिड-टेम्पलेट-क्षेत्र: "हेडर हेडर" "स्टैंडफर्स्ट स्टैंडफर्स्ट" "अनुच्छेद 1।" "पुलक्वोट पुलक्वोट" "अनुच्छेद 2 फोकस";
  }
.article2 {
  कॉलम-गणना: 1;
  } 

18. अपने लेआउट का परीक्षण करें

दूसरे ग्रिड को ब्राउज़र की पूर्ण चौड़ाई और दो कॉलम जोड़े जाने के लिए भी आकार दिया जाता है। छवियों को पाठ के ऊपर पंक्ति पर तरफ रखा जाता है ताकि यह प्रदर्शन पर अच्छी तरह से फिट हो। आप 1200px चौड़ाई से नीचे अपने ब्राउज़र का आकार बदलकर ब्राउज़र में इस लेआउट का परीक्षण कर सकते हैं।

। Container2 {
  चौड़ाई: 100%;
  मार्जिन: 0 ऑटो;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 50% 50%;
  ग्रिड-टेम्पलेट-क्षेत्र: "img1 img2" "अनुच्छेद 3 अनुच्छेद 3";
} 

19. मोबाइल के लिए ट्वीक डिजाइन

कोई भी ब्राउज़र जिसमें 769px से कम की चौड़ाई है, उसे अंतिम चरण में जोड़ा गया कोड मिलेगा। हमें यहां करने की ज़रूरत है यह सुनिश्चित करना है कि प्रत्येक ग्रिड में एक कॉलम लेआउट है ताकि सामग्री को छोटी जगह के भीतर ठीक से देखा जा सके।

 @ मेडिया स्क्रीन और (अधिकतम चौड़ाई: 768 पीएक्स) {
  / * अंतिम चरण कोड यहाँ * /
} 

20. एकल कॉलम ग्रिड की जाँच करें

अब पहला ग्रिड ब्राउज़र की चौड़ाई के 100 प्रतिशत के एक कॉलम पर सेट है और टेम्पलेट क्षेत्रों में अनुभागों का क्रम जोड़ा गया है। यह देखने के लिए जांचें कि पृष्ठ का पहला भाग मोबाइल स्क्रीन पर कैसे काम कर रहा है।

। Container1 {
  चौड़ाई: 100%;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 100%;
  ग्रिड-टेम्पलेट-क्षेत्र: "हेडर" "स्टैंडफर्स्ट" "अनुच्छेद 1" "पुलक्वोट" "फोकस" "आलेख 2";
} 

21. लेआउट खत्म करें

यहां, दूसरा ग्रिड भी एक कॉलम भरने के लिए बनाया गया है और अनुभागों का लेआउट परिभाषित किया गया है। अब तैयार डिज़ाइन को सहेजें और सीएसएस ग्रिड की पूर्ण लेआउट क्षमता देखने के लिए अलग-अलग आकार की स्क्रीन पर इसे देखें और अलग-अलग चौड़ाई के लिए सामग्री को फिर से व्यवस्थित करना कितना आसान था।

। Container2 {
  चौड़ाई: 100%;
  मार्जिन: 0 ऑटो;
  ग्रिड-टेम्पलेट-पंक्तियां: ऑटो;
  ग्रिड-टेम्पलेट-कॉलम: 100%;
  ग्रिड-टेम्पलेट-क्षेत्र: "img1" "img2" "अनुच्छेद 3";
} 

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

।

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

• सुपर-फास्ट सीएसएस के लिए 5 टिप्स
• सीएसएस प्रदर्शन संपत्ति को समझना
• सीएसएस आकार के साथ पिरामिड लेआउट कैसे बनाएं

---

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

मंगा चेहरे ड्राइंग के लिए 17 युक्तियाँ

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

(छवि क्रेडिट: ज़करी ली) [1 9] मंगा चेहरे ड्राइंग..

---

फ़ोटोशॉप में एक छवि का आकार बदलने के लिए

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

फ़ोटोशॉप में एक छवि का आकार बदलने के तरीके को जान�..

---

Create a slide-out menu

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

सुधार करने का एक शानदार तरीका प्रयोगकर्ता का अनुभव आपकी साइट �..

---

Create a vector displacement mesh brush

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

याद मत करो वर्टेक्स 2018 , सीजी समुदा�..

---

एक मूल टैरो कार्ड पेंट

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

जब मुझे अपना पहला टैरो डेक मिला, तो मुझे सुंदर कला�..

---

एक भूत सवार परिवर्तन का अनुकरण करें

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

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..

---

Create a pouring water effect in RealFlow

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

यह ट्यूटोरियल आपको दिखाता है कि तरल डालने वाले प्..

---

Using vector tools: A web designer's approach

कैसे करना है Sep 14, 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