CSS Grid嵌套的内联网格问题答案

【问题标题】：CSS Grid nested inline-grid issueCSS Grid嵌套的内联网格问题
【发布时间】：2020-12-13 16:00:25
【问题描述】：

我有一些 CSS 网格代码，其中有嵌套 div。完整代码如下：

#outer-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  border: 10px solid purple;
}

#outer-grid>div {
  grid-column: 1 / -1;
  background-color: red;
  color: white;
  font-size: 4vw;
  padding: 10px;
}

#inner-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

#inner-grid>div {
  background: salmon;
  padding: 10px;
}

<div id="outer-grid">
  <div id="inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div id="inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

所以，我有一个使用 css 网格的包装 div 和 2 个使用 inline-grid 但由于某种原因不是并排的内联 div。

我该如何解决这个问题？

【问题讨论】：

#outer-grid>div - 在此选择器下应用的样式是什么？
没有特别的原因。任何不是结构的部分，忽略
删除这一行：grid-column: 1 / -1;，看看你是否得到了想要的布局。

标签： css css-grid

【解决方案1】：

删除grid-template-rows: 1fr 1fr; 和grid-column: 1 / -1;。

#outer-grid {
  display: grid;
  /* grid-template-rows: 1fr 1fr; */
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  border: 10px solid purple;
}

#outer-grid>div {
  /* grid-column: 1 / -1; */
  background-color: red;
  color: white;
  font-size: 4vw;
  padding: 10px;
}

#inner-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

#inner-grid>div {
  background: salmon;
  padding: 10px;
}

<div id="outer-grid">
  <div id="inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div id="inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

【讨论】：

为什么我只能在包裹之前添加 2 个内部网格？我可以添加更多并让它们调整大小而不是换行吗？
@Tomazbyden2000 在你的问题中，你没有写你可能想要两个以上的内部网格。我的回答是参考你的代码。看看这里，它可能会有所帮助：css-tricks.com/snippets/css/complete-guide-grid
@Tomazbyden2000 这是因为您已将外部网格定义为 2 列。