css - 是否可以在没有 JS 且没有元素重复的情况下构建此布局 - 只有 CSS？

Question

我一直在努力寻找构建此布局的方法。除社交元素外，所有元素的高度都未知。 related 和 latest 元素是可选的。

我想在不求助于 JS 或复制元素的情况下做到这一点，但实际上我不确定这是否可能。

使用 flexbox 和“order”属性可以很容易地处理手机和平板电脑。我以为我可以通过恢复为 float 来处理桌面布局，但由于元素高度未知，因此无法保证(即，如果正文较短，最新和/或相关元素可能会 float 到左侧)。

有什么想法吗？或者我应该接受它并使用 JS 为桌面断点动态添加侧边栏到 DOM？

编辑:注意元素的顺序!如果我将桌面侧边栏元素放在一个容器中，我将无法再使用 flexbox 在移动设备/平板电脑上重新排序它们。另外，我认为网格布局不适用，因为桌面布局不遵循网格模式。

Answer 1

像这样的二维页面布局正是 CSS Grid 的设计目标。 Flexbox 更适合在一个维度上排列元素(尽管在嵌套或包装时第二个维度很容易跟随)。正如其他人所提到的，这种布局应该完全可以仅使用 CSS 来完成。

使用 CSS 网格的一种方法是使用三个 template area definitions在每个断点上发生​​变化，如 demonstrated here .

部分 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 网格的浏览器的用户展示哪种布局。

要了解有关 CSS 现代布局技术的更多信息，我建议您查看 Rachel Andrews 和 Jen Simmons 的文章和视频。

如果您有其他问题或意见，请告诉我。