• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

CSS3 web前端中文站 2年前 (2017-05-17) 1159次浏览 已收录 0个评论

CSS3 Grid LayoutGridLayout

在 Web 的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。比如下图的效果:

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

在以前面对这样的效果,最好的解决方案是能过 HTML 的结构来做一定的处理。比如:

<div class="banner">     
<div class="container"></div> </div> 

比如我们的布局效果是960px的水平居中效果:

.container {    
width: 960px;     
marign-left: auto;     
margin-right: auto; } 
.banner .container {     
width: 100%; } 

但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候,这种方法并不能解决问题。不过,值得庆幸的是,有另外的方案可以在限宽的容器中实现全屏效果。

.u-containProse {     
max-width: 40em;     
margin-left: auto;     
margin-right: auto; }  
.u-release {     
margin-left: calc(-50vw + 50%);     
margin-right: calc(-50vw + 50%); } 

这是一个较新的方案,不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果,但是在一些平台上会出现一个水平滚动条,这是让人无法接受的。除非你在body元素上设置overflow-x:hidden;

有关于如何在限宽的容器中实现全屏效果这个方案的详细介绍,可以阅读前期分享过的一篇文章《如何在限宽的容器中实现全屏效果》。

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

我们的目标

今天咱们主要的目的不是介绍如何使用 CSS Grid,但从前介绍 CSS Grid布局的文章中大家不难发现,对于 Web 的布局我们有新的方案,而且我们的方案也更佳灵活。而我们今天的最大目标是在限定容器中实现全屏布局效果。别的咱先别说,咱们来从设计的角度看:

在限制容器内放置内容,从而提高页面内容可读性。但有时,很多时候可能会在 Web 中出现某个图片需要全屏效果。简言之,就是在某限制宽度的容器内实现全屏的效果。

比如下图的效果:

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

针对于上面的所说的布局,实现的布局效果方案有多种,但针对于一些其他的布局,我们无法知道固定宽度的容器两边的margin,特别是在类似于三列布局,主内容两侧的间距(也就是列间距)。大多数内容只会填补中间的部分,但我们的视觉内容将跨越所有三个列。

针对于这种现象,我们再来考虑一些 CSS 的其他方案。

Em 的在布局中的运用

给包含内容元素设置样式:

.Prose {     
display: grid;     
grid-template-columns:          
[full-start] minmax(1em, 1fr)          
[main-start] minmax(0, 40em) [main-end]         
minmax(1em, 1fr) [full-end]; } 

根据 CSS Grid知识,不难发现,上面的代码我们已经定义了三个列,第一个和最后一列的最小间距是1em,拉伸的时候可以有1fr的可用空间。对于主内容,拉伸最大宽度是40em

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

正如上图所示,中括号定义了网格线的名称,也是列与列的分界线。这些网格线的名称是可选的,可以根据可阅读性,可维护性定义对应的网格线名称。

接下来,把所Prose所有子元素声明为main列:

.Prose > * {     
grid-column: main; } 

最后让需要全屏显示的元素设置:

.Prose-splash {     
grid-column: full; } 

下图就是最终的效果。而且并没有设置overflow-x和负的margin值。

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

新技巧

因为全屏元素是基于容器而不是窗口,这种布局技术适合于不对称布局。

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

这也意味着宽屏元素可能会结合内容上下文,它可以提供一些有趣的样式,特别如block-quotes或者代码块:

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

也可以很好的利用列间距这样的,在这里放置一些描述性的内容,比如下图:

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

来看一个简单的示例效果:

另外一个示例:

不可避免的缺点

虽然这种方法有一些特长,具有一定的优势,但也有一些缺点:

  • 设置了display:grid元素的所有子元素设置float将失效
  • 虽然浏览器对网格支持力度越来越大,但针对于老一点的浏览器版本,还需慎用

其实这些并不很重要,但对于未来,CSS Grid 的支持力度越来越强,在 CSS 中也更具吸引力。那是因为 CSS Grid 布局变得越来越普遍。

最后特别感谢@Tyler Sticka 提供的技术分享。文章大部分代码和图片来源于其分享的《Breaking Out With CSS Grid Layout》一文。

web 前端中文站点评:

关于 Grid 的学习,这篇文章只是初步介绍了 Grid 的布局问题,接下来大家可以继续学习阅读《如何使用 CSS GRID 布局实现限宽容器全屏效果》、《CSS GRID 布局这样玩》、《CSS Grid 和 Flexbox 解决实际的布局问题》、《探讨 CSS GRID LAYOUT 在原生客户端中运用》和《深入理解 FLEX 布局以及计算》,形成对比学习。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何使用 CSS Grid 布局实现限宽容器全屏效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址