破坏 CSS 网格 请运行以下简单的网格布局示例，其中网格单元格是 <select multiple></select>： .grid-container { align-items: start; 显示：网格；网格间隙：10px；} .grid-column-count-2 { 网格模板列：重复（2，minmax（0，1fr））；} .grid-row-count-2 { 网格模板行：重复（2，最小内容）；} .col-1 { 网格列开始：,css,html-select,css-grid"/>
时间戳

首页 > 解决方案 > 破坏 CSS 网格 请运行以下简单的网格布局示例，其中网格单元格是 <select multiple></select>： .grid-container { align-items: start; 显示：网格；网格间隙：10px；} .grid-column-count-2 { 网格模板列：重复（2，minmax（0，1fr））；} .grid-row-count-2 { 网格模板行：重复（2，最小内容）；} .col-1 { 网格列开始：

问题描述

标签： csshtml-selectcss-grid

解决方案

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

.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 size="3" 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>

推荐阅读