Мы познакомились с боксами и убедились, что потоком можно управлять. Научившись изменять поведение боксов в потоке, вы сможете строить сетки любой сложности.

Сеткой называют расположение крупных боксов на странице. К таким боксам обычно относят шапку, подвал сайта, основное (<main>) и дополнительное (<aside>) содержимое, различные секции и разделы. Как правило, количество сеточных элементов на странице не меняется, а их размеры задаются согласно макету.

Макет — это изображение веб-страницы. Его создаёт дизайнер, а веб-разработчик использует его как образец при вёрстке. Макеты можно создавать в графическом редакторе или в специальных программах.

Вот макет страницы, которую нам предстоит сверстать:

Разметка страницы и декоративные стили уже готовы, осталось только правильно сверстать сетку. Декоративные стили (с большинством свойств оттуда вы познакомились в тренажёре «Знакомство с HTML и CSS») были вынесены в отдельный файл. В обычной жизни так не поступают, но так проще учиться работать с сеткой.

Начнём с того, что подключим на страницу три стилевых файла: с декоративными стилями, с подсветкой сеточных элементов и пустой, в котором будем писать сеточные стили.