html - CSS 网格自动填充和全 Angular 单元格 - 空列

Question

我正在尝试构建一个 CSS 布局，其中包含一列或两列(取决于页面宽度)，并在其上方有一个全 Angular "navbar" 。如果可能的话，我不想使用媒体查询。

* { word-wrap: break-word; }

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

nav {
  grid-column: 1 / -1;
}

/* only for visualisation */
#grid > * { margin: 5px; }
.col { border: 1px dashed black; }
nav { border: 1px solid blue; }
#grid { border: 1px solid red; }

<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

窄屏幕:

正常屏幕:

但是，如果屏幕太宽，它会决定添加第三个甚至更多空列。我可以通过增加 minmax 中的最小值来修复它，但是当页面太窄时它会溢出。

如果我删除全 Angular 单元格，则不会发生此故障。

如何修复它？

Here is a jsfiddle demo

Answer 1

您只需增加minmax即可这里的宽度repeat(auto-fit, minmax(300px, 1fr))来自300px至450px但这会导致布局提前收缩为两行，但在全屏模式下会适合它，所以如果你对收缩到提前没有任何问题，只需下面的内容

示例

* {
  word-wrap: break-word;
}

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  border: 1px solid red;
  grid-gap: 10px;
}

nav {
  grid-column: 1 / -1;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
}

<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

但是，如果您不喜欢早期缩小，这是通过检测您希望布局缩小为两行的屏幕尺寸来实现媒体查询的唯一最佳方法，然后将 repeat(1, minmax(300px, 1fr));要尊重一列，否则请使用 repeat(2, minmax(300px, 1fr));两列。

通过这种方式，您可以轻松设置 minmax为零，如 repeat(2, minmax(0, 1fr));当屏幕太小时，这看起来很棒

示例

* {
  word-wrap: break-word;
}

#grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  border: 1px solid red;
  grid-gap: 10px;
}

nav {
  grid-column: 1 / -1;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
}

@media (max-width: 750px) {
  #grid {
    grid-template-columns: repeat(1, minmax(300px, 1fr));
  }
}

<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>