Можно ли построить этот макет без JS и без дублирования элементов - только CSS?

Question

Я изо всех сил пытался найти способ построить этот макет. Все элементы имеют неизвестные высоты, за исключением социальных элементов. Связанные и последние элементы являются необязательными.

Я бы хотел сделать это, не прибегая к JS или дублированию элементов, но на самом деле я не уверен, возможно ли это вообще.

Мобильные телефоны и планшеты очень легко обрабатываются с помощью flexbox и свойства order. Я думал, что смогу справиться с макетом рабочего стола, вернувшись к плавающим элементам, но поскольку высота элементов неизвестна, это не гарантируется (то есть последние и / или связанные элементы могут перемещаться влево, если основная копия короткая).

Есть идеи? Или я должен просто смириться с этим и динамически добавить боковую панель в DOM с JS для точки останова рабочего стола?

Редактировать: Обратите внимание на порядок элементов! Если я помещаю элементы боковой панели рабочего стола в контейнер, я больше не могу переупорядочивать их на мобильном телефоне / планшете с flexbox. Кроме того, я не верю, что макет сетки применим, поскольку макет рабочего стола не соответствует сетке.

Answer 1

Двухмерный макет страницы, как это было сделано для CSS Grid.Flexbox больше подходит для размещения элементов в одном измерении (хотя второе измерение будет легко следовать при вложении или переносе).Как уже упоминалось, этот макет должен быть полностью выполнимым только с помощью CSS.

Один из подходов с использованием CSS Grid состоит в том, чтобы иметь три определения области шаблона , которые меняются на каждой точке останова, как показано здесь .

Часть HTML и SCSS для этого:

<div class="grid">
    <div class="area social"></div>
    <div class="area body-social"></div>
    <div class="area categories"></div>
    <div class="area related-latest"></div>
</div>

.area {
    &.social { grid-area: social; }
    &.body-social { grid-area: body-social; }
    &.categories { grid-area: categories; }
    &.related-latest { grid-area: related-latest; }
}

@media (min-width: 64em) {
    .grid {
        grid-template-areas: 
            "body-social social"
            "body-social categories"
            "body-social related-latest";
    }
}

Я позволил себе объединить некоторые ваши разделы в области, так как не знаю, визуальный дизайнзапретил бы это.Возможно, вам придется управлять некоторыми дополнительными желобами, если это так.Также обратите внимание, что правый столбец в широком макете в настоящее время имеет размер только по длине текста внутри, что, вероятно, не будет соответствовать реальному содержанию.Будут и другие варианты использования, которые я не рассмотрел, но если что-то и послужит отправной точкой для моего примера, то

Несколько иной подход - определить grid-template-columns и grid-template-rows длякаждой точки останова и настройте правильные значения grid-columns и grid-rows для каждой области или раздела.Это подразумевает более четкое определение размера, которое имеет свои плюсы и минусы.

Кроме того, вам нужно подумать о том, какой макет вы хотите представить людям, использующим браузер без поддержки CSS Grid.

Чтобы узнать больше о современных методах верстки в CSS, я рекомендую ознакомиться со статьями и видео Рэйчел Эндрюс и Джен Симмонс.

Сообщите мне, если у вас есть дополнительные вопросы или замечания.