Если погуглить на эту тему, то:
Система сетки используется для вывода элементов на одни и те же вертикальные линии. Это дает вашему макету лучший внешний вид, потому что все текст/заголовки/изображения выравниваются по горизонтали одинаково.
При использовании сетки получается, во-первых, упорядочить элементы в "систему", что в умелых руках дает "композицию"/порядок, а, в-вторых, такой макет потом будет проще верстать с использованием фреймворков.
Начните изучение с одной из сеток-первооткрывателей по запросу "
960 px".
Вот
тут тоже пример пояснения на эту тему.
Как я понял, принцип построения сетки, обусловлен "добавлением" части экрана в зависимости от его размера.
все элементы макета находящиеся за пределами контейнера обрезаются
– это, кстати, не совсем верно. В "нормальной" сетке ничего не обрезается. Скорее меняется по заранее прогнозированным сценариям. Грубо говоря (очень грубо) у вас есть несколько макетов под маленькие, большие, средние размеры окна. И сетка позволяет вам в этом всём соблюдать ритм и порядок.
