现代 CSS

Grid

CSS Grid布局:网格单元格布局

CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局:什么是网格布局》和《CSS Grid布局:浏览器开启CSS Grid Layout》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看官不用太急,接下来通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力。

CSS Grid布局:浏览器开启CSS Grid Layout

上一篇《CSS Grid布局:什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语,为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中,将向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能。

CSS Grid布局:什么是网格布局

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module,我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。

使用calc()创建CSS网格

网格系统对于Web前端人员来说不是一个陌生的话题了,在w3cplus上介绍网格系统的教程并不少,不过这些网格系统都有其类似之处。在HTML中为了能应用好网格,都需要添加一些类名,而在样式中,不管你用了几列网格,都有一大串的样式代码。这让一个有代码洁癖的人员来说,总觉得不爽。幸好,CSS预处理器的出现,如Sass。可以让你的代码变得更简单一些,但和以前的网格也极其类似。有时试想,有没有更好的呢?今天看到Create a CSS grid using calc()觉得很有意思,通过calc()和Sass的结合,生成需要的网格。希望此篇文章对大家有所启发。

使用Sass创建弹性网格

在Web设计中,时常可以碰到一个网站中实现网格布局。这个过程可能非常痛苦,但保持视觉上和一个精心设计的网格一致性是非常值得的。但当你为一个响应式设计写样式的时候,你并不想在布局为为每个元素计算宽度。相反,您需要一个伸缩的解决方案,在你的网格中可以指定匹配的宽度。我们可以使用一个像960网格系统来解决这个问题,但是在我看来,框架有很多问题,不过我们可以使用Sass来解决这些问题。

Hold住CSS布局新属性

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志。按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作。然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器,在W3C的推动下,已经开始实现多种新型的布局方式,而且我们现在已经可以开始使用了。举个例子,W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

CSS布局的未来

大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里,我能够保证在数年之后,css3必定能够引领潮流。在这篇文章当中,我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具,也许在这些阶段中你不一定用得到他们,(至少不是现在),但仍然还很有必要去了解,通过这样可以透过迷雾,看清未来。

Grid

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

CSS3 Grid Layout

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

页面

返回顶部