技术控

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

[其他] CSS Grid Layout: Going Responsive

[复制链接]
深流Penetrasunny 发表于 2016-10-3 17:32:23
151 5
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()  
苏宝呀 发表于 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帖子不给力,勉强给回复下吧
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表