1. 首页
  2. css

CSS使用边到边网格的全宽度元素

如果你有一个有限宽度的容器,比如说一个居中的文本列,那么\”打破\”它来生成一个全宽度的元素就意味着欺骗。也许最好的技巧是使用左相对定位和基于左视口的负边距。虽然它有自己的注意事项(例如,要求身体上有隐藏的溢出物,容器需要居中,等等),但至少它很容易完成,容器中的所有其他东西都能愉快地进行它的工作。有相当多的文章谈到了另一种方法,包括CSS网格:泰勒的\”用CSS网格布局突围\”,瑞秋在自己的一篇文章中回答了这个问题。,\”带有CSS网格和命名列的编辑设计模式\”Selen Gora\”s\”使用CSS网格将容器中的框设置为全宽\”Bryan Robinson\”s\”使用CSS子网格在文章模板中布局全宽的内容条带边到边网格。我一直在想,\”人们真的在整个页面布局中使用CSS网格吗?\”比如,本质上是body { display: grid; }¹?文章本身倾向于使用类名,但假设父级是一个全浏览器宽度的容器。
我四处打听了一下,有人低声说,\”是的,我完全是这样做的\”所以,酷,这是人们常做的事。我的第一个想法是,这似乎是一个痛苦的屁股有几个原因:
1. 一个典型的\”页眉\”和\”页脚\”是全宽的,因此,必须明确地将它们放在网格上,并将它们延伸到正确的列数上,并在处理列时保持最新,这与将标题放在站点顶部(或底部)的块级别相比,似乎是一项艰巨的工作。你仍然可以在中间有一个边到边的网格,在上面和下面都有块级元素。
2. 必须明确地将\”article\”中的所有项目放在中间的一列中(例如,article > * { grid-columns: 2 / 3; }这样你就可以偶尔通过跨越更多的列来\”拉伸\”某些东西,这让我觉得很奇怪。比如说,如果95%的内容都放在一个居中的列中,那么把内容放在一个处理布局的父元素中,而不是让每个单独的元素自己放在网格中,最终的结果是它看起来就像是在一个共享的父元素中。我并不一定讨厌这种技术,只是注意到它让我觉得奇怪。但我可能已经老了。我建议不要直接在body元素上使用display: grid;。一个常见的问题是:浏览器扩展可能会将内容放入主体内的DOM中,然后将其放入网格中,并可能会破坏布局。我亲眼目睹了这一切。我想说,这就像React的最佳实践一样,不是绑定整个身体,而是使用一个div子对象,它实际上是一个相同的东西,只是作用域是一个选择器。

CSS使用边到边网格的全宽度元素 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bd%bf%e7%94%a8%e8%be%b9%e5%88%b0%e8%be%b9%e7%bd%91%e6%a0%bc%e7%9a%84%e5%85%a8%e5%ae%bd%e5%ba%a6%e5%85%83%e7%b4%a0/