技术控

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

[其他] CSS Grid Layout: Going Responsive

[复制链接]
深流Penetrasunny 发表于 2016-10-3 17:32:23
121 5

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

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

x
Throughout this series we’ve become familiar with Grid syntax, learned about some efficient ways of laying out elements on a page, and said goodbye to some old habits. In this tutorial we’re going to apply all of that to some practical responsive web design.
  Media Queries

  Let’s use the demo from where we left off last time.
  It comprises two declared grids; our main grid and the nested grid within one of our items. We can control when these grids come into effect using media queries, meaning we can completely redefine our layout at different viewport widths.
  Begin by duplicating the first grid declaration, and wrapping the duplicate in a mobile-first media query (I’m using 500px as the breakpoint, but that’s completely arbitrary):
  1. .grid-1 {
  2.     /* grid declaration styles */
  3. }


  4. @media only screen and (min-width: 500px) {

  5.     .grid-1 {
  6.         /* grid declaration styles */
  7.     }

  8. }
复制代码
Now, within the first declaration we’ll change how our grid is defined, placing the whole thing in a single column. We’ll list just one column in our    grid-template-columnsrule, make sure the four rows we now have are defined with    grid-template-rows, and arrange the layout with     grid-template-areas:  
  1. .grid-1 {
  2.     display: grid;
  3.     width: 100%;
  4.     margin: 0 auto;
  5.    
  6.     grid-template-columns: 1fr;
  7.     grid-template-rows: 80px auto auto 80px;
  8.     grid-gap: 10px;
  9.    
  10.     grid-template-areas:    "header"
  11.                             "main"
  12.                             "sidebar"
  13.                             "footer";
  14. }
复制代码
We’ve also made our    grid-gapjust 10px by default, to account for smaller screens.  
      Here’s what that gives us.You’ll notice that we’re also using our media query to change the    paddingand    font-sizeon our    .grid-1 divitems.  
  Our Nested Grid

  That takes care of the main layout, but we still have the nested grid which remains stubbornly in its two column layout under all circumstances. To fix that we’ll do exactly the same as before, but using a different breakpoint to suggest a content-first approach:
  1. .item-2 {
  2.     /* grid declaration styles */
  3. }


  4. @media only screen and (min-width: 600px) {

  5.     .item-2 {
  6.         /* grid declaration styles */
  7.     }

  8. }
复制代码
Check out    the end result on CodePen.  
  A couple of things to note here:
  
       
  • As we’ve said before, you can      visuallyarrange grid items irrespective of the source order, and media queries mean we can have different visual orders for different screen widths. However, nesting has to remain true to the source; our nested grid items must always be visually and      actually descendants of their parent.   
  • CSS transitions don’t have any influence over Grid layout. When our media queries kick in, and our grid areas move to their new positions, you won’t be able to ease them into place.  
  auto-fill and minmax()  

  Another (sort of) responsive approach to Grid is well suited to masonry-type layouts; blocks which size and flow automatically, depending on the viewport.
  auto-fill

  Our approach up until now has been to dictate how many tracks there are and watch the items fit accordingly. That’s what is happening in this demo; we have    grid-template-columns: repeat(4, 1fr);which says “create four columns, and make each one a single fraction unit wide”.  
  With the    auto-fillkeyword we can dictate how    wideour tracks are and let Grid figure out how many will fit in the available space. In this demo we’ve used     grid-template-columns: repeat(auto-fill, 9em);which says “make the columns 9em wide each, and fit as many as you can into the grid container”.   
  Note: this also takes our gutters, the    grid-gap, into account.  
  The container in these demos has a dark background to show clearly how much space is available, and you’ll see that it hasn’t been completely filled in the last example. So how do we do that?
  minmax()

  The    minmax()function allows us to set a minimum and a maximum size for a track, enabling Grid to work within them. For example we could setup three columns, the first two being 1fr wide, the last being a maximum of 1fr, but shrinking no smaller than 160px:  
  1. grid-template-columns: 1fr 1fr minmax(160px, 1fr);
复制代码
All the columns will shrink as you squish the window, but the last column will only be pushed so far.    Take a look.  
  Back to our    auto-filldemo, if we were to change our column width for    minmax(9em, 1fr)Grid would place as many 9em tracks as possible, but then expand them to a maximum of 1fr until the container is filled:  
  Caveat: Grid will recalculate the tracks upon page reload (try squishing the browser window and hitting refresh) but it won’t do so on window resize. Media queries can be used to alter the values, but they still won’t play nice with window resize.  
  Conclusion

  Let’s wrap up with some bullets:
  
       
  • Media queries can help us      completelyrearrange Grid layouts by redefining       grid-template-areas(and other things) for different scenarios.   
  • CSS transitions don’t have any effect on changes made to the grid layout.   
  • The       auto-fillkeyword is useful for filling up grid containers.   
  • The      minmax()function complements      auto-fillnicely, making sure containers are properly filled, but doesn’t give us “responsiveness” in the true sense of the word.  
  With the lessons learned in this series, you’re armed to go out and start playing with Grid! Stay tuned for more Grid tutorials, practical exercises, solutions to common layout problems, and updates.
  Useful Resources

  
       
  • Rachel Andrew’s       Grid by Example 29: minmax() and spanning columns and rows   
  • Video: Rachel Andrew (obviously)      demonstrating minmax() on the Tuts+ homepage layout   
  • W3C Editor’s Draft:       auto-fill   
  • W3C Editor’s Draft:      minmax()  
友荐云推荐




上一篇:Go pro: The power user's guide to PowerShell
下一篇:Android 刷量技术揭秘(一):工具篇
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

苏宝呀 发表于 2016-10-3 19:38:12
路过的帮顶
回复 支持 反对

使用道具 举报

f656e5 发表于 2016-10-3 19:54:29
沙发抢不到,板凳也行啊!
回复 支持 反对

使用道具 举报

dsia112 发表于 2016-10-4 05:32:49
你长的拖慢网速,你长的太耗内存,大哥,把你脸上的分辨率调低点好吗?国际脸孔世界通用。
回复 支持 反对

使用道具 举报

过往情殇 发表于 2016-10-4 13:06:43
我志愿加入酱油党,围观楼主搞基,挽回楼主尊严,履行回帖义务,保证经验收入,积极前排求粉,信誉有粉必回,人人粉我,我粉人人,为打酱油事业奋斗终身,随时准备为粉和酱油牺牲一切,永不潜水!
回复 支持 反对

使用道具 举报

冯丽弘 发表于 2016-10-5 22:29:05
LZ帖子不给力,勉强给回复下吧
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读

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

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

返回顶部 返回列表