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

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

在以前面对这样的效果,最好的解决方案是能过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布局效果,也可以实现在限宽容器中实现全屏布局效

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/breaking-out-with-css-grid-layout.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部