CSS网格布局中的代码块

Question

我遇到了使用css-grid创建博客布局的问题。问题是，在我向帖子添加代码块之前，博客会响应所有视图端口。如果代码块有一条延伸到网格之外的单行（或者就此而言的视口），那么它就会以快进的方式进入未知区域。我已经发现它最初与我使用1fr有关，因为这是作为自由空间或一种自动属性，我假设的孩子继承了这个属性，并相应地调整自己的大小。 / p>

grid-template-columns: 25px 1fr 25px;

> * {
  grid-column: 2; /* start all content at grid line 2 */
  margin: 0.5em 0;
}

我转而使用minmax()，并开始在我的代码块中取得更大的成功：

display: grid;
grid-template-columns: 25px minmax(250px, auto) 25px;
margin: 100px auto;
max-width: 1000px;

> * {
  grid-column: 2;
  margin: 0.5em 0;
}

然而，我又回到auto属性，让我搞砸了。如果选择auto属性，代码块将再次运行。所以我去了媒体查询：

@media (max-width: 345px) {
  grid-template-columns: 25px minmax(250px, 310px) 25px;
}

固定的minmax()值解决了我的问题，但仅针对该定义的查询。我不认为我应该创建大量的媒体查询来解决这个问题（我也不想这样做）。我已尝试min-content和max-content与minmax()，但我相信他们也拥有auto属性，因为我最终遇到了同样的问题。我一直在浏览MDN上的文档，看看我的选择是什么，但我找不到任何东西。有什么我不会看到的吗？

完整代码：

import styled from 'styled-components'

const Post = styled.article`
  display: grid;
  grid-template-columns: 25px minmax(250px, max-content) 25px;
  margin: 100px auto;
  max-width: 1000px;

  > * {
    grid-column: 2;
    margin: 0.5em 0;
  }

  /* Other styles for elements from markdown here */

  @media (max-width: 345px) {
    grid-template-columns: 25px minmax(250px, 310px) 25px;
  }

  @media (min-width: 736px) {
    grid-template-columns: 50px 1fr 50px;
  }
 `

 Post.displayName = 'Post'

 export default Post

视觉：