Как мне настроить сетку

Question

Я создал прототип ландшафта, и теперь мне нужно кодировать его в HTML5 & CSS.

В части макета я решил использовать сетку, и, как вы видите ниже, я так структурировал ее бумага до кодирования. Теперь, поскольку я хочу сделать ландшафт более отзывчивым, я не уверен, что параметры, заданные для шаблона сетки, верны.

Прототип

Эскиз

HTML

   <div class="landscape-grid">
        <div class="landscape-grid__left-bar"></div>
        <div class="landscape-grid__header"></div>
        <div class="landscape-grid__main-content"></div>
        <div class="landscape-grid__video"></div>
    </div>

CSS

.landscape-grid{
    display: grid;
    grid-template-columns: 3.28125% 53.489583333333% 43.2291666666667%;
    grid-template-rows: 75px 168px 711px auto; 
}

Как вы можете видеть, я пытался сохранять пропорции столбцов и переводил пиксели в пропорции. Однако я не уверен, что этот метод лучше всего подходит для этого примера, потому что я вижу много людей, использующих атрибуты fr и min-content / max-content в своих сетках. Как это относится к моему?

Буду признателен за любые предложения!

Answer 1

Вам нужно задать себе пару вещей, чтобы принять такое решение:

1. Как выглядит мобильное / планшетное / адаптивное представление? Возможно, что flex больше подходит в зависимости от того, как вы хотите, чтобы он выглядел.
2. Какие элементы имеют фиксированные размеры. Например изображение справа. Это фиксированная ширина / высота? Если нет, то вы можете подумать об использовании fr с object-fit для соответствующего масштабирования. Если он зафиксирован, то все остальное будет зависеть от его размера.

Если вы относительны, то обычно использование дробных единиц лучше, чем проценты, но вы должны принять во внимание, как изображение весы.

Вот хорошее руководство по сетке, вы должны посмотреть здесь, чтобы увидеть все лучшие способы его использования: https://css-tricks.com/snippets/css/complete-guide-grid/.

Первое, что я Я бы порекомендовал вам сделать прототип для мобильных устройств и планшетов. Нелегко спросить, как заставить что-то реагировать, когда мы не знаем, как выглядит мобильный вид!