CSS में गैप के बिना रिस्पॉन्सिव टाइल्स

आइए एक टाइल बनाएं जिसमें स्क्रीन की चौड़ाई के आधार पर एक पंक्ति में ब्लॉकों की अलग-अलग संख्या होगी। यहां एक उदाहरण है जो हमें प्राप्त करना चाहिए:

पहले HTML कोड लिखते हैं:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

आइए अब ब्लॉकों के माता-पिता को स्टाइल जोड़ें:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

अब ब्लॉकों को स्वयं स्टाइल सेट करते हैं, बिना उनकी चौड़ाई सेट किए:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

जाहिर है, ब्लॉकों की चौड़ाई प्रतिशत में होनी चाहिए, ताकि स्क्रीन बदलने पर ब्लॉक अपनी चौड़ाई आसानी से बदल सकें। साथ ही, स्क्रीन के कुछ निश्चित बिंदुओं पर हमें ब्लॉकों की चौड़ाई इस तरह बदलनी चाहिए कि एक पंक्ति में इन ब्लॉकों की एक निश्चित संख्या फिट हो सके।

आइए वह कोड लिखते हैं जो एक पंक्ति में चार ब्लॉक रखेगा:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

और अब एक पंक्ति में तीन ब्लॉक रखते हैं:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

और अब एक पंक्ति में दो ब्लॉक रखते हैं:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

एक पंक्ति में एक ब्लॉक:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

आइए सारा कोड एक साथ इकट्ठा करते हैं:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

मेरे कोड को इस तरह संशोधित करें कि ब्लॉकों की चौड़ाई calc फ़ंक्शन के माध्यम से गणना की जाए।

एक टाइल बनाएं जो स्क्रीन के छोटे होने पर पहले एक पंक्ति में चार तत्व, फिर एक पंक्ति में दो तत्व, और फिर एक तत्व प्रति पंक्ति दिखाएगी।

एक टाइल बनाएं जो स्क्रीन के छोटे होने पर पहले एक पंक्ति में छह तत्व, फिर एक पंक्ति में तीन तत्व, और फिर एक तत्व प्रति पंक्ति दिखाएगी।