居中时如何“自动扩展”CSS网格单元以填充可用空间？ [复制]

Posted 2023-03-05

【中文标题】居中时如何“自动扩展”CSS网格单元以填充可用空间？ [复制]

【英文标题】：How to "auto-expand" CSS grid cells to fill available space when it is centered? [duplicate]

【发布时间】：2019-01-21 18:34:40

【问题描述】：

我正在尝试解决一个问题，即如果屏幕足够宽，CSS 网格会居中并且其中的单元格均匀地跨越可用空间。这是为了避免在大屏幕（例如台式机）上，内容会跨越整个屏幕而难以理解。

看来我已经接近了，但最后一个似乎是最困难的一个：填充网格单元。这也可能是由于我采用的方法，我只是不明白，但也可能是我对 CSS 属性了解不够。

我有a pen 最能说明情况。而且由于一张图片至少和千字一样好，所以我展示了令人痛苦的布局问题：

问题：用 Article 平衡其他单元格的方法是什么？ IE。他们的左右边缘是否与文章在“同一条线上”？ （还有一个问题，当Article变小时，会出现一个垂直滚动条，而不是Article的内容换行。）

我认为CSS中的相关部分是以

开头的部分

@media only screen and (min-width: 600px) 
    .container 
        grid-template-columns: repeat(3, 1fr);    

       /* These are the pieces that set centering. */
       margin: auto;
       width: 1000px;        
       justify-items: center;    
    

我在心里玩弄了一个添加“侧栏”的想法，看看我是否可以扩展这些边缘。我会，但我不确定这是否是我要走的路，而且我目前的技能，可以说，有点缺乏 CSS。 :)

【问题讨论】：

在网格容器上使用justify-items: center，您将居中网格项，而不是它们的内容。如果您只想将内容居中，则将居中属性应用于网格项目 (revised demo)。欺骗中有更详细的解释。

@Michael_B 啊，我看到了修改后的演示，添加了 flex 布局。我没有资格判断哪个会更好，因为两者似乎都可以解决问题。也许这种 flex 布局提供了更多工具来解决其他问题，即在其他媒体查询启动之前应用 flex-wrap: nowrap; 或其他东西来移除滚动条，将导航移除到侧边菜单并包装文本。

【参考方案1】：

如果我正确理解了这个问题，您希望所有 div 都 100% 成为网格容器并与文章内联吗？

.container header,
.container nav,
.container footer 
   grid-column: span 3;
   width: 100%;


.container section 
   grid-column: span 3;
   width: 100%;

您需要为项目添加 100% 的宽度，它们将达到容器的大小。

给你：https://codepen.io/anon/pen/YjMmLw?editors=0110

【讨论】：

你是对的。伙计，我觉得自己像个邓布利顿。你可能不相信，但我已经在 CSS 网格上玩了几个小时了......成为一个 n00b 并没有帮助，现在也是午夜。我会拿着这个然后跑。干杯！

不确定这个答案如何解决问题。它只是覆盖居中。

回复：<article> 滚动条...它没有换行，因为您将容器设置为固定宽度 (width: 1000px)。这将防止容器缩小，从而防止文本换行。而是使用max-width: 1000px。 codepen.io/anon/pen/gjJYOG

另外，您的问题可能令人困惑，因为您说问题是“垂直”滚动条。我认为您的意思是“水平”。

无需“处理这种情况”。你可以保持原样。如果您觉得我在副本中的回答有帮助，您可以给它点个赞。