Какой подход при верстке срезанного по бокам лейаута правильный?

Question

[Danny13]

Есть много сайтов, в которых весь контекст в layout распологается посередине, а с боков имееются отступы, как здесь:


Я задумался как сделать такой-же layout и мой первый подход заключался в том, чтобы дать секции с контентом (section-wrapper) padding-left и padding-right определенные значения: 150px. И потом с помощью queries менять это значения в зависимости от размера экрана. Как то так:


Однако посмотрев похожие сайты (в браузере посмотрил код), я увидел, что там используется в основном другой подход. Сам section-wrapper (тоесть основной контейнер) выровнен по центру и имеет ширину в px. Соотв. в зависимости от размера экрана, меняется ширина контейнера. Примерно так:


Какой из этих подходов правильный (наиболее оптимальный) и какой подход использовали бы вы?

Спасибо!

Answer 1

[approximate solution]

Не стоит придумывать после 10 лет развития веб разработки свой велосипед. Делайте центрирующий контейнер.

Comments

[Danny13]

Тоесть по второму подходу и с шириной по px?

[alex4answ]

Danny13, делайте 100% и ограничивайте max-width, затем центруете margin: auto и все, это классика

[approximate solution]

Danny13, Т.е делаете wrapper(container), который ограничивает контент по ширине и изменяется в зависимости от брейкпоинтов

[approximate solution]

Danny13, https://webformyself.com/opredelenie-stilej-kontej...

[Danny13]

Спасибо!

Answer 2

[tema_sun]

Вариант с padding-left/padding-right позволяет создавать центрально-расположенные контейнеры без дополнительного оберточного элемента. Т.е. можно сделать такую разметку:

<div class="Block Container">
    ...контент
</div>

вместо такой:

<div class="Block">
    <div class="Container">
    ...контент
    </div>
</div>

Делайте как вам нравится, тут неправильного варианта нет.

Comments

[Danny13]

Спасибо ^^