Сетка посложнее, добавляем содержание [23/32]
Сетка готова. Осталось протестировать её с настоящим содержанием.
Мы уже добавили контент в разметку и спрятали его. Вам нужно лишь снова отобразить его, а также убрать вспомогательные границы и фоны, чтобы увидеть готовый результат.
Обратите внимание еще на один подход построения сеток. Он заключается в том, что блокам разметки задаются только размеры и внешние отступы. Внутренние же отступы добавляются дополнительным элементам, вложенным в ячейки сетки.
Такой подход упрощает расчет сеток. Как вы помните, блочная модель устроена таким образом, что общий размер элемента складывается из ширины/высоты, маргинов и паддингов, а также ширины рамок. Поэтому, чтобы получить правильные размеры блоков сетки, всегда нужно помнить об этом. Если же блокам сетки задавать только ширину и внешние отступы, то слагаемых становится намного меньше, а шанс совершить ошибку уменьшается.
block-23-32.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Сетка посложнее, добавляем содержание</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
margin: 0;
padding: 0;
font-family: "PT Sans", sans-serif;
font-size: 14px;
}
.wrapper {
width: 430px;
margin: 0 auto;
box-shadow: 0 0 2px #cccccc;
}
.clearfix::after {
display: table;
content: "";
clear: both;
}
.header {
margin-bottom: 10px;
color: white;
background: #34495e;
}
.header .layout-column {
min-height: 50px;
}
.header .layout-column-1 {
float: left;
width: 280px;
}
.header .layout-column-2 {
float: right;
width: 130px;
}
.features {
margin-bottom: 10px;
}
.features .layout-column {
float: left;
width: 130px;
min-height: 100px;
margin-right: 20px;
background: rgba(236, 240, 241, 0.9);
}
.features .layout-column:last-child {
margin-right: 0;
}
.footer {
min-height: 50px;
color: white;
background: #34495e;
}
/* Стили содержания */
.hidden {
display: block;
}
.logo {
padding: 10px;
}
.logo p {
margin: 0;
}
.menu {
margin: 0;
padding: 10px;
list-style: none;
}
.menu li {
margin-bottom: 5px;
padding: 5px;
text-align: center;
background: #2c3e50;
border-radius: 5px;
}
.feature {
padding: 10px;
text-align: center;
}
.footer-logo {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header clearfix">
<div class="layout-column-1 layout-column">
<div class="logo hidden">
<img width="140" src="https://htmlacademy.ru/themes/htmlacademy/img/logo.png">
<p>Научитесь создавать современные веб-интерфейсы, оттачивайте своё мастерство, станьте настоящим профессионалом.</p>
</div>
</div>
<div class="layout-column-2 layout-column">
<ul class="menu hidden">
<li>Курсы</li>
<li>Интенсив</li>
</ul>
</div>
</div>
<div class="features clearfix">
<div class="layout-column">
<div class="feature hidden">
Вы научитесь создавать современные веб-интерфейсы, работать с живым кодом, использовать новейшие технологии.
</div>
</div>
<div class="layout-column">
<div class="feature hidden">
Минимум скучной теории и максимум практических упражнений, решение реальных задач и настоящие испытания.
</div>
</div>
<div class="layout-column">
<div class="feature hidden">
Интересные, наглядные и затягивающие курсы, интерактивные интерфейсы, достижения — всё для обучения с удовольствием.
</div>
</div>
</div>
<div class="footer clearfix">
<div class="footer-logo hidden">
<img width="140" src="https://htmlacademy.ru/themes/htmlacademy/img/logo.png">
</div>
</div>
</div>
</body>
</html>