कुछ शैलियों के साथ, आप कई प्रकार की पृष्ठ सामग्री के लिए इस आकर्षक, लचीले लेआउट का उपयोग कर सकते हैं।
सीएसएस आपको आकर्षक, प्रतिक्रियाशील लेआउट डिज़ाइन करने के लिए काफ़ी लचीलापन प्रदान करता है। एक पत्रिका-शैली का लेआउट मिश्रित पाठ और छवि सामग्री को एक आकर्षक, आकर्षक प्रारूप में व्यवस्थित करता है, जिससे यह एक लोकप्रिय विकल्प बन जाता है।
सीएसएस ग्रिड आपको इस लेआउट को प्राप्त करने के लिए आवश्यक उपकरण और बढ़िया नियंत्रण प्रदान करता है, इसलिए यह सीखने के लिए एक बेहतरीन तकनीक है।
पत्रिका-शैली लेआउट क्या हैं?
पत्रिका-शैली के लेआउट सामग्री को स्तंभों और पंक्तियों में व्यवस्थित करने के लिए ग्रिड जैसी संरचना का उपयोग करते हैं।
वे विभिन्न प्रकार की सामग्री जैसे लेख, चित्र और विज्ञापन को व्यवस्थित और आकर्षक तरीके से प्रदर्शित करने के लिए बहुत अच्छे हैं।
सीएसएस ग्रिड को समझना
सीएसएस ग्रिड एक मजबूत लेआउट टूल है जो आपको देता है तत्वों को द्वि-आयामी अंतरिक्ष में रखें, इसे आसान बनाना कॉलम और पंक्तियाँ बनाएँ.
इस प्रकार के लेआउट के साथ, दो प्राथमिक घटक काम में आते हैं: ग्रिड कंटेनर, जो ग्रिड की संरचना को परिभाषित करने के लिए जिम्मेदार है, और ग्रिड आइटम, जो कंटेनर के चाइल्ड तत्व हैं।
यहां एक सरल उदाहरण दिया गया है कि आप 3x3 ग्रिड बनाने के लिए सीएसएस ग्रिड का उपयोग कैसे कर सकते हैं:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
यह कोड एक ग्रिड कंटेनर को समान चौड़ाई के तीन कॉलम और वस्तुओं के बीच 20px अंतर के साथ परिभाषित करता है। यहाँ परिणाम है:
HTML संरचना की स्थापना
पत्रिका-शैली लेआउट के लिए, आपको एक अच्छी तरह से संरचित HTML दस्तावेज़ की आवश्यकता होगी। विचार करना अपनी सामग्री को व्यवस्थित करने के लिए अर्थ संबंधी तत्वों का उपयोग करना पसंद
<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>
ग्रिड कंटेनर को परिभाषित करना
अपने पत्रिका-शैली लेआउट के लिए ग्रिड बनाने के लिए, निम्नलिखित सीएसएस कोड जोड़ें:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;/* Defines the grid container */
display: grid;/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
यह सीएसएस निर्दिष्ट करता है कि कंटेनर तत्व, .पत्रिका-लेआउट, घोषणा का उपयोग करने वाला एक ग्रिड कंटेनर है प्रदर्शन: ग्रिड.
ग्रिड-टेम्पलेट-कॉलम और ग्रिड-टेम्पलेट-पंक्तियाँ गुण संयोजन का उपयोग करते हैं दोहराना, स्वत: फ़िट, और न्यूनतम अधिकतम. ये सुनिश्चित करते हैं कि कॉलम की चौड़ाई और पंक्ति की ऊंचाई कम से कम हो 250px, और जितनी संभव हो उतनी वस्तुएं प्रत्येक में फिट होती हैं।
ग्रिड आइटम रखना
अब आकर्षक थंबनेल-शैली तत्व बनाने के लिए प्रत्येक लेख और उसकी सामग्री को स्टाइल करें:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
इस बिंदु पर, आपका वेबपेज कुछ इस तरह दिखना चाहिए:
पत्रिका-शैली लेआउट बनाना
वास्तविक पत्रिका-शैली का रूप प्राप्त करने के लिए, लेख तत्वों को अपनी इच्छानुसार किसी भी क्रम में फैलाने के लिए सीएसएस शैलियाँ जोड़ें:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
आपका पेज अब इस तरह दिखना चाहिए:
सीएसएस ग्रिड के साथ उत्तरदायी डिजाइन
सीएसएस ग्रिड के फायदों में से एक इसकी अंतर्निहित प्रतिक्रिया है। तुम कर सकते हो लेआउट को समायोजित करने के लिए मीडिया क्वेरीज़ का उपयोग करें विभिन्न स्क्रीन आकारों के लिए. उदाहरण के लिए:
/* Media query for screens up to 1100px */
@media screen and (max-width:1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width:600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
ये मीडिया क्वेरीज़ डिवाइस स्क्रीन आकार के लिए सबसे उपयुक्त होने के लिए कई लेआउट परिभाषाओं के बीच स्विच करती हैं। आपका अंतिम लेआउट विभिन्न आकारों के अनुकूल होगा:
सीएसएस ग्रिड के साथ अपने लेआउट को बदलना
सीएसएस ग्रिड एक लचीला उपकरण है जिसका उपयोग आप पत्रिका-शैली लेआउट बनाने के लिए कर सकते हैं जो विभिन्न स्क्रीन आकारों में समायोजित होते हैं। यह आपको ग्रिड संरचनाओं को परिभाषित करने, आइटम रखने और लेआउट समायोजित करने की सुविधा देता है।
अपनी वेबसाइट के लिए सही पत्रिका-प्रेरित लेआउट प्राप्त करने के लिए विभिन्न ग्रिड कॉन्फ़िगरेशन और शैलियों के साथ प्रयोग करें।
