破坏CSS网格

Question

[请运行以下简单的网格布局示例，其网格单元为<select multiple></select>：

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

<div class="grid-container grid-column-count-2 grid-row-count-2">
  <select multiple class="col-1 row-1 rowspan-2 align-self-stretch">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
  </select>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

[预期结果是select element跨越两行，每行的高度由第2列中的<input type="text" />元素定义，就像我将select替换为简单的div时一样：] >

.grid-container {
  align-items: start;
  display: grid;
  grid-gap: 10px;
}

.grid-column-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-row-count-2 {
  grid-template-rows: repeat(2, min-content);
}

.col-1 {
  grid-column-start: 1;
}

.col-2 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-start: 1;
}

.row-2 {
  grid-row-start: 2;
}

.rowspan-2 {
  grid-row-end: span 2;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}
<div class="grid-container grid-column-count-2 grid-row-count-2">
  <div class="col-1 row-1 rowspan-2 align-self-stretch" style="background-color: #f2f2f2; border: 1px solid #bbb; overflow-y: scroll;"></div>
  <input type="text" class="col-2 row-1" />
  <input type="text" class="col-2 row-2 align-self-end" />
  <input type="text" class="col-2 row-1" />
</div>

问题：

我如何以select元素样式化它的方式

• a）具有固定的min-height，例如30px;
• b）除此之外，只需从其所在的网格单元中获取其height（就像第二个示例中的div一样）

换句话说：

如何防止select元素影响网格中的行高？

注意：我不能使用固定高度的行。

注2：如果在定义网格的grid-template-rows方面，解决方案不尽相同，那么我也持开放态度（只要它允许任意内容定义行高）。我不确定我的问题是否足够清楚。请留下评论，解释不清楚的地方，我会尽力而为。

请运行以下简单的网格布局示例，其中的网格单元格为

Answer 1

您可以使用Select2 jquery插件进行选择和多选。在此处找到文献documentation here

Answer 2

考虑将size属性添加到<select>。在您的情况下，在size="1"和size="3"之间将提供与所需结果类似的结果。

Answer 3

行高很好，并且不受select元素的影响。换句话说，具有多个select的options元素不会破坏网格。