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

Question

我正在尝试构建一个CSS布局，其中包含一或两列（取决于页面宽度），并在其上方使用全角"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中的min值来解决它，但是当页面太窄时，它将溢出。

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

我该如何解决？

Here is a jsfiddle demo

Answer 1

您可以简单地将minmax的{​​{1}}的宽度从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));
  }
}

Answer 2

这是一个flexbox作业：

* {
  word-wrap: break-word;
}

#grid {
  display: flex;
  flex-wrap:wrap;
  gap:10px;
  border: 1px solid red;
}

nav {
  width:100%;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
  flex-basis:300px;
  min-width:0;
  flex-grow:1;
}

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