现代 CSS

Grid

为什么是display:contents而不是CSS Grid的subgrid

在CSS Grid Layout中,如果没有人提出display:contents;来解决一部分问题,那么你就无法深入的讨论CSS Grid Layout中的subgrid,那么我们真的需要subgrid?事实并非如此,display:contents的确帮我们解决了这类问题,但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中,我将用实例来介绍他们的不同之处。

CSS Grid Layout一些有趣的事情(1)

几周前,我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样,对这个话题也很陌生,我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

minmax()函数如何工作

CSS Grid Layout规范中的minmax()函数是一个非常有用的新特性。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。

探讨CSS Grid Layout在原生客户端中运用

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了CSS Grid Layout之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化,那么他在原生客户端(也就是APP)开发中,其运用是否也能像Web一样呢?接下来我们就一起来探讨。

阐述CSS Grid实现限宽容器全屏效果

在《如何使用CSS Grid布局实现限宽容器全屏效果》一文中介绍了使用CSS Grid布局实现限宽容器全屏效果,特别是全屏图片的效果时常可见。但这篇文章并没有详细阐述为什么使用CSS Grid这种方法。@Rachel Andrew新发的博文尝试阐述其中的原理。

学习CSS Grid

CSS Grid是一个强大的工具,它允许在Web上创建二维布局。这一篇学习CSS Grid的指南,通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons@Rachel Andrews两位女士,她们是CSS Grid的主要贡献者,可以说要是没有她们,就没有今天的CSS Grid。

如何使用CSS Grid布局实现限宽容器全屏效果

在Web的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候,前端有关于布局方面的技术又得到了新的突破,比如CSS Grid布局方案,到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案,其实就是想说一点,通过现在的CSS Grid布局效果,也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

CSS Grid布局这样玩

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

【转载】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)来演示如何构建一个具有响应式的漫画效果。

页面

返回顶部