Разберем понятие модульной сетки, что это такое и как правильно применяется, при помощи библиотеки для веб-разработки Bootstrap.
Основные преимущества модульной сетки. Во-первых, она ускорит работу, потому что нам не придется тратить массу времени на попытки гармонично расставить все элементы. Во-вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок. В целом, модульная сетка является каркасом, который значительно облегчает построение сайта.
Начнем
Все, что окружает нас, имеет свои пропорции. Еще в детстве мультик «38 попугаев» научил нас тому, что все можно поделить на части, равные друг другу (длина удава состояла из 38 попугаев). Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее. Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр — это модули
Из всего этого мы можем понять, что модуль — это условная единица, шаг в ритме сетки. А сама сетка являет собой систему пропорций.Сама по себе сетка это набор столбцов которые проходят через всю веб-страницу от начала до конца. Придназначена модульная сетка для выравнивания блоков, секций и других элементов сайта в один уровень с такими же элементами. Bootstrap использует сетку состоящую из 12 столбцов, соответсвенно если обратить внимание на рисунок ниже, то можно утвержадть что каждый блок занимает по 3 столбца. Например:
Система разметки используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот так работает система разметки Bootstrap:
.row должны быть помещены в .container (fixed-width) или .container-fluid (full-width) для правильного выравнивания и заполнения..row и .col-xs-4 доступны для быстрого принятия разметки макетов.padding. Тогда padding компенсируется в строках для первого и последнего столбца с помощью отрицательного margin на .row..col-xs-4.Задача: создать несколько интеркативных элементов, описывающих кратко некоторый контент
Этот блок будет занимать 4 столбца
Этот блок будет занимать 4 столбца
Этот блок будет занимать 4 столбца
Задача: создать 3 карточки товара идущие в одну строку