Prosty wzorzec HTML oparty na trzech kolumnach (ale środkowa jest szeroka na dwie) oparty na tak zwanej kracie (grid).

Jest to nowoczesne podejście do problemu stylowania, który dawniej robiło się tak:
http://fx-team.fulara.com/uklad-strony-oparty-na-3-kolumnach-html-css/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <link rel="Stylesheet" type="text/css" href="style.css">
     <title>Grid - przykład</title>
</head>
<body>
    <div class="grid-container">
          <div class="header">
              Header
          </div>
          <div class="menu">
              Menu
          </div>
          <div class="main">
              Main
          </div>  
          <div class="right">
              Right
          </div>
          <div class="footer">
              Footer
          </div>
    </div>
</body>
</html>

style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header '
    'menu main main right'
    'footer footer footer footer';
  grid-template-columns: 15% auto auto 15%;
  grid-template-rows: auto 500px auto;
  grid-gap: 10px;
  background-color: #6c5656;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 50px;
}
HTML + CSS, Szablony stron