Grid

CSS3网格布局介绍——网格的运行

CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何布局,很有可能是一个内容块在一个虚拟的网络位置。与旧的表格方法相比,表格是基于一个使用的表,这里的具有清晰的文档语义和内容与结构的分离。在一个模板中使用不同的结构标签,使用多个浮动和手动计算实现一个布局是困难的,这里介绍的方法变得非常简单和清晰。与绝对定位相比,网格更具灵活性。与当今天流行的CSS/JS库相比,这些库使用网格都需要指定相应的类名(作为一个示例,比如bootstrapyui css grids),而在网格布局模块中是不需要额外增添这些类名。

使用CSS3 Grid布局实现内容优先

浏览器支持许多CSS3的模块,帮助我们解决我们习惯于使用图片的CSS效果。崛起的移动浏览器和响应式网页设计概念给了我们一个全新的方式来来看待Web设计。然而,当它们来临的时候,我们的布局还没有跟上。我们已经讨论了多年的源顺序、内容也结构和内容与样式的分离。然而,为了得到一定的视觉布局,我们大多数不得不决定源秩序。目前,W3C在制作一些一趣的规范,虽然这些规范会不断的变化,但他们总是在一个起跑线上变动。在这篇文章中,我将向大家介绍CSS的一个模块——CSS3网格布局模块,使我们能够定义一下网格和放置元素。本文实示演示基本的网格布局,并讨一个方法,我们可以开始思考的内容是具有一个更多的自适应方法。在我们开始之前,需要特别注意,在撰写本文的时候,这些例子只能在IE10上运行。CSS3网格布局是由微软创建的一个模块,在使用的时候需要添加IE10浏览器的前缀“-ms-”。我的例子都将使用“-ms-”前缀,而不包括其他浏览器的前缀,不仅仅因为CSS3 Grid布局模块还是一个规范草案,而且在其他浏览器中实现的效果也可能存在不一致。实现今天的效果也很有可能会改变,希望能得到您的反馈。

Grid

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题,比如浮动布局(除除浮动)、inline-block布局(间距问题)。通过提供一种新的方式来给Web页面布局。这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后,你可以把每个子元素定义成一个列和行(类似于单元格)。不需要修改任何标记,直接通过css搞定。随着这个技术的成熟,我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

CSS3 Grid Layout

Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果,但在实际中还是存在不少的问题,比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的,更理想的布局方法?这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

页面

返回顶部