Почти каждую веб-страницу, которую мы видим, можно разделить на поля, которые можно упорядочить в определенном порядке для создания этой веб-страницы. Ниже приведен один из примеров.
Один из самых простых инструментов для реализации макетов на веб-странице обеспечивается HTML. Но по мере того, как макет становится сложным, таблицы HTML быстро теряют свою простоту из-за увеличения текста разметки.
Если вы хотите создать страницу с двумя столбцами с левой навигационной панелью и центральной областью просмотра контента, ее легко сделать с помощью CSS-поплавков. Просто установите левую навигационную страницу в `<div>`со свойством style `float: left;` , и вы получите этот дизайн. Но что, если у вас было 4 столбца в одном разделе? Конечно, можно сделать это с помощью float, но синтаксис HTML, который вы пишете, будет легко понять.
Здесь появляются CSS-фреймы, такие как [Bootstrap](http://getbootstrap.com/) и [Materialize](http://materializecss.com/) . Эти структуры обеспечивают функциональность сетки, которая позволяет разделить каждый раздел вашей веб-страницы на 12 столбцов, которые вы можете упорядочить для проектирования.
* [CodeMentorTeam](https://www.codementor.io/codementorteam/4-different-html-css-layout-techniques-to-create-a-site-85i9t1x34) - методы компоновки для создания сайта