css 网格布局_使用Gridlex CSS网格系统轻松创建现代布局

引入CSS flexbox可以极大地改善前端开发。 这使得创建网格和列变得容易得多，这些网格和列可以自然地移动以响应布局。

与其从头开始编写自己的flexbox网格，不如使用Gridlex之类的工具容易得多 。 这个免费的开源flexbox库超轻量级 ，非常易于定制 。

您要做的就是将Gridlex样式表添加到您的网页并使用其网格类 。 内部列采用.col类，您将所有这些都包装在.grid容器中。 这将以相同的宽度定义每一列，并创建一个统一的界面。

可以通过向每列添加大小调整类来覆盖此默认设置。 这样，您可以使一列的宽度为70％，另一列的宽度为30％（例如，内容/边栏）。

您可以在Gridlex主页上找到大量的网格样本 ，其中包括实时演示和代码段，以将其复制/粘贴到您的站点中。 这是一个巨大的库，具有许多可选类 ，可帮助您为任何网站构建最简单的网格。

所有网格总计共有12个迷你列 ，因此您可以定义每列应占用的空间。 这看起来可能令人困惑，但是当您看到视觉演示时，这是有道理的。

这是用于宽度可变的较大网格的代码示例 ：

<div class="grid">
  <div class="col">...</div>
  <div class="col-2_sm-12">...</div>
  <div class="col-6_sm-12">...</div>
</div>

请注意， .grid类包含所有内容，并且列尝试拆分为12个部分 （在示例中，每个部分的宽度为）。 但是，固定列的跨度分别为2列和6列，因此第一列将根据剩余的内容使用自动宽度 。

使用其他两列，我们可以推断出还有4列（12-6-2）剩余， 总共命中了12列 。 这都是非常简单的数学运算，但是类名可能会令人困惑。 一旦开始在项目上使用Gridlex，您将快速使用命名系统。

Gridlex当前为2.x版本，并在GitHub上 不断更新 。 随着浏览器支持的增加，我将保证更多地关注flexbox，更多的站点将这种模型用于页面网格。

您甚至可以找到运行Gridlex的网站的完整图库 ，以了解将其应用于实时网站时的外观。

如果您以前从未使用过flexbox，那么Gridlex可以是一个有趣的库。 但我也建议您首先使用有趣的Flexbox游戏进行练习，以测试您的知识并帮助您了解基本知识。

Gridlex在GitHub存储库中 免费提供，您也可以通过npm或bower将其拉出。 它在主站点上提供了完整的文档 ，包括有关宽度可变的列和媒体查询的演示。

您可以完全控制 flexbox的设计，只需几个CSS类即可实现！ 而且，如果您有一个快速的问题或想分享使用Gridlex构建的网站，可以在Twitter @webdevlint上向创建者发送消息。

翻译自: https://www.hongkiat.com/blog/gridlex-flexbox-grid-system/