巧用CSS网格进行网站建设

发布日期：[2014/1/30] 编辑：奇亿广州网站建设

在最简单的布局设计中，网格是协助网页设计师完成完美网页设计的辅助工具。网格常使用于垂直或水平对齐元素，以便设计师更容易对网页进行设计以及修改。

什么是CSS网格

一个CSS网格基本上是一个预先设计好的框架，划分了屏幕空间，让您可以预设栏目内的设计。你可以使用它们布局你的网页以达到视觉上的聚焦。网格布局由来已久，但网格的出现是在打印业上，后来被使用于网页设计。网格是一个极好的设计辅助工具，并且能够起到很好的作用，这也就是为什么会有CSS网格的原因。CSS网格与印刷业的网格不同，因为CSS网格是基于网页设计的一种技术，但它们起到了同样的效果：视觉凝聚力。

为什么要使用CSS网格

在此之前，我曾经说过，在网页设计中使用网格能够提高网页的视觉凝聚力。下面我将更为详细的说明为什么我们要使用网格来进行设计：

通过布局结构和一致性的视觉凝聚力
有助于执行设计
节省创建一个网站CSS版式基本布局的时间
有助于版面元素的排版
容易执行的流体/响应布局
新的设计师和开发人员的辅助轮
网格是跨浏览器兼容的

CSS网格和响应性的Web设计

现在，最优秀的网格设计不但能够自动适应不同屏幕的浏览器浏览，并能够自动调整页面元素的展示方式。譬如说，一个网站的导航，在PC端显示是一长条，但如果放在手机屏幕浏览，不但字体小，而且不方便阅读。这种情况下，如果网页能够自动适屏并转行，将会更容易浏览。因而，响应式网页设计变得越来越重要，这也就是为什么当你在进行网页设计时，响应式的网格变得越来越重要的原因。

一些优秀的网格系统

960网格系统

960网格系统是目前最流行的网格系统之一。它的建立是为了“通过提供通常使用的尺寸简化Web开发工作流程”。它是基于12和16列的网格，很容易实现和使用。

978格：简单的CSS网格

此网格是为了回应960网格系统的限制和制约发展。最大的问题是，960网格系统没有使用正确的利润率，因为本来应该列和两个边缘之间的差距较大在非常两端不应该有反正，因为他们没有提供任何价值。另外一个抱怨是，有太多的类。所以，来到978px网格而这些问题都解决了增加的差距，或者水槽和类的数量明显下降。它被冠以一个简单的网格，因为它消耗的能力，而在同一时间保持网格最小，因此允许更高的创意控制和创造。

Less Framework 4网格

这个网格是基于一个固定宽度，但自适应网格，拥有四种不同的布局与合作的框架。这个网格的特殊之处在于，它是由68px列和24PX水槽和列的变化，以适应不同的屏幕尺寸而导致的四种布局的创作和改编的总和。布局改变由于其检测的观看设备的屏幕大小，然后相应地显示相应的布局媒体访问。这是设计师今天要面对的一个整洁，现代的方式去对响应两难问题。

Foundation 5

如果你正在寻找的是拥有所有功能和选项的高级网页设计框架，Foundation 5将会是你最好的选择！毕竟，这个框架是“世界上最先进的响应式前端设计框架”。该框架允许开发SASS，同时实现了新的网络技术，以帮助人们创造更好的网站。除此之外，Foundation 5即使是在IE8浏览器中也能够良好运作。当然，这是一个灵活的网格，它是对所有的屏幕尺寸很容易适应，从手机到电视。

Don’t Overthink It Grids

Don’t Overthink It Grids是由the wonderful Chris Coyier 所创建的一个使用简单的网格，他认为，许多网格的框架内很复杂，但实际上不必要如此。因此，他创造了一个教程，展示了如何创建一个设计师或开发人员可以很容易地实现，并利用的一个简单的网格。如果您有兴趣或出于好奇希望了解这些网格的技术方面的工作，或者因为你想使自己的格子，我强烈建议您阅读Chris的帖子：Don’t Overthink It Grids

One% CSS Grid

One% CSS Grid是一个非常酷的流体框架。它是基于12列的一个网格系统，专门为流体响应设计而设计的。网格是基于百分比设计，能够以惊人的流动能力来调整网页适应各种各样的浏览器及屏幕浏览。此外，由于它是基于百分比，你不必像做任何事情那样任何手动调整大小或重新排版以适应浏览需求 - 它会自动完成！更令人惊喜的是，One% CSS Grid拥有两种不同类型的网格供您选择。