CSS-ում բազմակի wrappers-ով դասավորության սխեմա

Զարգացման ընթացքում հաճախ հանդիպում են դասավորություններ, որտեղ բլոկներն ունեն ֆոն ամբողջ էջի լայնությամբ, իսկ այդ բլոկների բովանդակությունը կենտրոնացած է: Ահա այդպիսի դասավորության օրինակ.

Նման դասավորության դեպքում մենք ստիպված կլինենք կազմել ոչ թե մեկ wrapper, այլ մի քանիսը՝ յուրաքանչյուր բլոկի համար: Միևնույն ժամանակ, wrapper-ի ներսում պետք է լինի ևս մեկ բլոկ, որն իրականացնում է բովանդակության կենտրոնացումը: Պետք է լինի նաև դաս, որը պատասխանատու է բովանդակության ֆոնով ներկելու համար:

Մեր դասավորության ընդհանուր սխեման կունենա հետևյալ տեսքը.

<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;
}