CSS 布局：使用 CSS 制作的流行布局和图案的集合

作为一名前端工程师，我必须处理很多布局和组件。

有很多 CSS 框架提供流行的布局和组件，但我通常不想在我的项目中包含整个框架，因为

• 它很大，里面有很多我不需要的东西
• 每个布局或组件都提供了很多不必要的选项，因为它为许多人提供了许多功能

对于每个具有不同要求的项目，我经常在 Google 上查找特定布局或 UI 模式的最基本部分，然后从那里开始构建。

因此，我收集了最流行的纯 CSS 布局和组件。它们由 flexbox 和 grid 等现代 CSS 特性提供支持。

它在这里：https://csslayout.io 🎉🎉🎉

它们是很好的起点，可以根据具体需求轻松选择和定制。通过组合它们，您可以获得现实生活中任何可能的布局。

它对我帮助很大，希望它也能帮到你！

源代码

这是伪 JavaScript 代码，但它涵盖了我用来构建网站的所有工具：

this
    .madeWith([react,typescript])
    .then(r => lint(tslint))
    .then(r => lazyLoad(@loadable/component))
    .then(r => optimizeAndBundle(webpack))
    .then(r => exportHtml(react-snap))
    .then(r => deploy(Netlify))
    .then(r => {
        expect(r).is(scalableCode);
        expect(r).is(superFastWebsite);
        expect(r).is(seoFriendly);
    })
    .finally(() => {/* Give me 1 star */}) 🎉

整个网站都是开源的，所以让我们探索一下并给我一个 Github 星 :)