技术控

    今日:68| 主题:49270
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Will we be flattening our HTML for CSS Grids?

[复制链接]
心控2star 发表于 2016-10-5 23:44:59
98 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart .Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).
   The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" status. Since all browsers have been developing against the spec, it's likely that widespread non-prefixed ready-to-go support will drop in all stable browsers fairly soon.
  The bad news is that it will probably do-so without subgrid support, a point that Rachel underscored well in her talk.
  Here's some typical "page layout" HTML:
  [code]
  
  

  
  

[/code]   All those major elements are a direct child of , so can be the grid and the four major elements are laid out on that grid. That's kind like one of Rachel's examples at GridByExample:
     
Will we be flattening our HTML for CSS Grids?-1 (yesterday,browser,amazing,version,against)
    But...

  ... let's say we wanted to build a grid from elements that weren't necessarily at a completely flat HTML structure like we just saw.
  [code]
  
  

   

          
  • Me three!

  •       
  • Me four!

  •    

  

  ...
[/code]   We can nest grids, just like we can nest flexbox within a grid cell or flexbox within flexbox, but in the example above we cannot make those child elements participate on the same grid together.
   You can see some of this at work in Jen Simmons Jazz Poster example , where headers are being hidden because they can't be in the correct place both semantically and positionally at the same time.

Will we be flattening our HTML for CSS Grids?-2 (yesterday,browser,amazing,version,against)
     Subgridding might get a little tedious, since it's kinda "subgrids all the way down" . To make even my little example above work it would be like...
  [code]body {
  display: grid;
}
.site-header {
  display: grid;
  grid: subgrid;
}
.main-content {
  display: grid;
  grid: subgrid;
}
.main-content > ul {
  display: grid;
  grid: subgrid;
}[/code]  And that's without defining how the grid actually works.
  Eric Meyer has also emphasized this need for subgrids:

  Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections. Neither solution is appealing.
   He used
markup as an example , where
友荐云推荐




上一篇:盗号近八千的木马长什么样?
下一篇:Statcheck: an R package to check statistical results in psychology papers
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

从红酒到宿醉 发表于 2016-10-6 00:43:30
曲筱绡、樊胜美、邱莹莹、安迪都会爱上心控2star
回复 支持 反对

使用道具 举报

熙西吉 发表于 2016-10-22 15:49:37
勿以坑小而不灌,勿以坑大而灌之。  
回复 支持 反对

使用道具 举报

投影沙漏 发表于 2016-10-28 18:20:53
生命中的第一个沙发,激动嘞!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表