Schema de layout cu wrapper-e multiple în CSS

Deseori în dezvoltare întâlnim layout-uri în care blocurile au fundal pe toată lățimea paginii, iar conținutul acestor blocuri este centrat. Iată un exemplu de astfel de layout:

În astfel de layout va trebui să facem nu unul singur wrapper, ci mai multe - pentru fiecare bloc. În același timp, în interiorul wrapper-ului trebuie să fie încă un bloc care realizează centrarea conținutului. De asemenea, trebuie să existe o clasă care răspunde de colorarea conținutului cu fundal.

Schema generală a layout-ului nostru va arăta în felul următor:

html<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>

Clasa center va fi utilizată pentru centrarea blocurilor:

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

Clasa line va fi utilizată pentru colorarea blocurilor:

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

Iar clasa wrapper va fi părintele fiecărui bloc. O vom utiliza pentru a seta spațiul dintre blocuri:

css.wrapper {
  margin-bottom: 30px;
}

Haideți acum să scriem codul complet al sarcinii noastre:

html<div class="wrapper">
  <div class="center">
    <h1>Main site header</h1>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Our company</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="center">
    <h2>Our price</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Our contacts</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css* {
  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;
}