सीएसएस में मल्टीपल रैपर लेआउट स्कीम

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

ऐसे लेआउट में हमें एक नहीं, बल्कि कई रैपर बनाने होंगे - प्रत्येक ब्लॉक के लिए। साथ ही, रैपर के अंदर एक और ब्लॉक होना चाहिए, जो सामग्री को केंद्र में करने का काम करे। साथ ही एक ऐसी क्लास भी होनी चाहिए जो सामग्री को बैकग्राउंड से रंगने का काम करे।

हमारे लेआउट की सामान्य स्कीम निम्नलिखित तरीके से दिखेगी:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

center क्लास का उपयोग ब्लॉकों को केंद्र में करने के लिए किया जाएगा:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

line क्लास का उपयोग ब्लॉकों को रंगने के लिए किया जाएगा:

.wrapper.line {
	background-color: #008040;
	color: white;
}

और wrapper क्लास प्रत्येक ब्लॉक का पैरेंट होगा। ब्लॉकों के बीच अंतराल देने के लिए इसका उपयोग करेंगे:

.wrapper {
	margin-bottom: 30px;
}

आइए अब हमारे कार्य का पूरा कोड लिखते हैं:

<div class="wrapper">
	<div class="center">
		<h1>मुख्य साइट हैडर</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>हमारी कंपनी</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>हमारी कीमत</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>हमारे संपर्क</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}