Layout

【转载】CSS Grid!

Grid布局来了,Grid布局来了。千真万确,各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~2017年3月,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid,所以,谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持,那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

通过漫画阐述CSS网格布局

CSS网格布局非常擅长在线制作漫画,特别是你想要灵活的实现你想要的漫画风格。这篇文章中我们通过使用巴里猫(Barry the cat)来演示如何构建一个具有响应式的漫画效果。

CSS Grid布局未来的特性

CSS Grid布局规范现在处于候选人推荐状态。这种状态也意味着规范已完成。现在在讨论的是一些实现细节,而不是新功能。规范一些细节是有必要的,以便于浏览器能更好的实现。这对于我们开发人员也是有好处,也使开会更容易。然而这并不意味着停止了工作,而新的用例和特性不能提出Grid布局的未来功能。因此,在这篇文章中我将看看我认为网格布局未来还能做些什么。我喜欢这样去思考,不只是考虑CSS Grid,还可以考虑任何CSS规范。考虑如何更好的适应你的用例。

Web布局新系统:CSS Grid,Flexbox和Box Alignment

Web布局非常困难。它如此困难的原因是自从使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是,我们有了Flexbox模块,或许还有很多读者已经开始使用CSS Grid和Box Alignment模块做Web布局。在这篇文章中,我将解释如何将这些组合在一起使用,你会发现通过对Flexbox的理解,你也能更好的理解Grid布局。

【转载】原生CSS网格布局学习笔记

以下是来自Oliver Williams的帖子。 Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。

布局演变史

最近有一个关于CSS的话题“既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?”。对于这样的话题,大家或许觉得没有什么,顶多也就是各种槽点。但事实上,在天朝CSS很多时候是不被看好,相比国外的同行,很少有人在专研CSS领域。这也造成,能写好CSS的同学不多,甚至说越来越少。

CSS Grid布局:理解CSS Grid中自动排列的算法

在这个系列教程中的《列和间距》一文中了解到了在CSS Grid布局中如何实现流体网格列和列间距。也了解到了没有必要指定网格项目具体的值就可以实现网格项目的排列位置。如果显式声明网格属性,网格项目根据自动排列算法,会使网格排列变得更糟糕。在这篇文章中我们将看看这个算法是如何影响网格项目的位置排列。

CSS变量创建网格系统

今天要聊的网格系统不是CSS Grid Layout,而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

需要为CSS Grid使用扁平化HTML结构?

昨天我在An Event Apart上看了@Rachel Andrew分享的CSS Grid Layout。Grid是CSS一个强大的特性,而且离到来的一天越来越近,它将是一个强大的Web布局模式。当然,那一天还没到,到目前没有稳定的浏览器支持Grid规范。

使用CSS Grid和Flexbox制作Card

“Card”这样的UI组件在现在的Web中经常可见,但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在,通过CSS GridFlexbox的组合,可以使卡整齐对齐,响应性更好,并适应其中的内容。接下来看看我们是如何制作的。

页面

返回顶部