您的位置: 首页 / Design / CSS3 中的 Gird 布局

CSS3 中的 Gird 布局

Published at Dec 19, 11pm / Keywords: ,

刚刚看了一份 W3C CSS3 的文档,是关于 Gird (网格?)布局草案的说明。无论它最终实现是否如草案中的描述,但这个功能本身就已经足够吸引人了。

我们看看下面这张图:

w3cgird

图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说,如果使用 CSS3 Gird 布局的话,我们只需这样写:

body { columns:3; column-gap:0.5in; }

img { float:page top right; width:3gr; }

其中,body 部分声明页面为 3 栏,栏间距为 0.5英寸;img 中 float 属性指明图片浮动位置为页面的右上角(CSS3 定位好强大 -__-),而宽度为 3 个栏宽。只需这样两行 CSS,我们就可以实现这个复杂的布局了。真的很神奇。

Gird 布局是好,不过如果你认为它很简单的话,你就大错特错了。看看 w3c 中关于它的介绍,你会发现理解它的意义不亚于看懂天书。好在还是个草案,但愿它到了正式版的时候,能够更加简单易用点。

Gird 布局应用很广泛,最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它(以及其它 CSS3 草案),那就酷毙了。不知道,最近异常低调的 IE8,会不会是这第一个吃螃蟹的人呢?

发表您的观点或推荐本文 Loading...

9 Responses

  1. ayu
    Dec 20, 9am / LINK / REPLY
    Gravatar

    呵呵,期待3.0.
    这个特性太吸引人了

  2. Dec 20, 10am / LINK / REPLY
    Gravatar

    没用,你猜他出来之后IE什么时候会支持?
    这不是让我这种用opera的人干着急么?

  3. Dec 20, 6pm / LINK / REPLY
    Gravatar

    你用-moz-column-count:3 -moz-column-gap: 1em;-moz-column-rule: 1px solid black 然后用Firefox试一下。。
    或者用-webkit-column-count -webkit-xxxx 然后用Safari试一下。。^^

  4. Dec 20, 9pm / LINK / REPLY
    Gravatar

    @ dimlau: Opera 很好啊,而且 Opera 向来都是支持 W3C 很好的。

  5. Dec 21, 7am / LINK / REPLY
    Gravatar

    很好很强大啊
    这么一看,比div合理多了…

  6. Dec 28, 2pm / LINK / REPLY
    Gravatar

    格子? Grid or Gird?

  7. Jul 1, 1am / LINK / REPLY
    Gravatar

    学习了 不知道对IE6的支持怎么样

  8. 子非鱼
    May 9, 9pm / LINK / REPLY
    Gravatar

    哈哈,如果支持网格组(grid bag)那就更加好了。

Now, It's your Turn!

BACK TO Article / Comments