大家好，我是前端菜鸟李不白，这一期内容带来的是layui框架中的栅格布局。
那么什么才叫做栅格呢？如图所示。
那么网页中的栅格是怎么区分的？以优酷电脑版为例。
并不是说优酷就用的layui开发的，这里只是举例做分析。
我截图的这一块分为三个部分，上面内容导航部分，为一个横向区域，正在热播这一块，也为一个横向区域。剧集这一块也为一个横向区域。它们里面的每一个小部分，可以看成每一个竖列。为了更直观的感受，我把效果图放一下。
那么怎么利用layui做到呢？首先我们要打开layui官网。
点击下载，你会得到一堆你需要的东西，类似于swiper官网，找轮播代码一样。它把所有的代码准备好，你用到什么，就加入什么就ok了。下载完成你会得到这些东西。
首先我们打开编辑器，先来引入它的代码。
有关css的部分，用link来引入。有关js部分，用src来引入。引入完成以后，我们开始做内容部分。用layui的方便之处就是，我觉得它把网页中的响应式做的比较不错。它里面自带了一些响应式布局的临界点。在多少多少视窗区域，是pc展示，多少多少视窗区域，再以平板，手机的视窗情况，改变网页布局来展示给用户。
这几行代码，先写个内容区域，类名layui-container有一些样式是框架里准备好的，我么自己再去根据自己的需求再添加样式就可以了。这里的宽度如果不写，它会默认1140px。适合于pc端展示。
这是上面的代码效果图，那么接下来再在这里面添加三行内容区域，代码如下。
类名里多加的颜色类名，是为了效果图区分每一行，给每一行加的颜色。
现在每一行搞定了，看效果，有点类似于弹性盒模型。接下来再搞定每一列。
颜色先不管了，主要看图。写了四列，为了加以区分，在样式上加了一个border。那么这四列怎么分配空间的呢？
layui会把你设置的宽度划分为十二等份。比如上面的layui-col-md3的意思就是，每一列占总宽度三份。col代表列，md代表pc端展示，还有sm平板，xs手机。而3数字，就代表占的几份。
而这四列刚好平均分完十二份，那么就可以在一行展示。如果不是呢？
比如，A列占了7份，B列占了6份，C列占了6份，D列占了6份。现在A+B是13份，不是12份，那么A就按照规定，单独占一行。把其它列挤下去。而B和C刚好12份，那么按规定，它两占一行，D独占一行。
如果B也是7份，那么继续往下挤。
如果你还想加间隙，为了看起来更好看，或者想要改变某些盒子的位置怎么办？
如上图所示，可以在你需要改动的盒子上，加入以上类名。如果不满足，可以添加样式margin一类的去改变，达到你想要的布局效果。
还有一个效果就是layui-hide-$。
$字符改成md或者sm或者xs，表示在不同设备下，隐藏一些盒子。因为是响应式布局嘛，在不同设备下展示的效果肯定不一样，所以做好取舍，隐藏不需要的盒子，以达到在当前设备下展示，比较舒服。
以上就是有关layui在栅格这一块的部分，而且用layui做响应式的时候，一定要设计好，在什么样的设备下，展示什么样的页面。如果一边做一边设计，就不是那么美好了。
当你拿到一个网页设计稿的时候，先思考，分为几个区域，每一部分都有什么，脑袋里要清晰的划分出来，这样在开发的时候，才会节省很多时间。
好了，这一期的内容就到这里，我们下期见，拜拜！！！
如果觉得《css修改layui的下拉框样式 js_layui 经典模块化前端UI框架 前端菜鸟带你初识栅格。...》对你有帮助，请点赞、收藏，并留下你的观点哦！
