Question

我正在构建元素网格，每个元素都有一个可扩展的详细信息框，该框应在其下方的行中占据空间。

这里正在起作用：

const grid = document.querySelector('.item-grid');
for( let i=0; i<26; i++) {
  let letter = String.fromCharCode("A".charCodeAt(0)+i);
  let dt = document.createElement('dt');
  dt.setAttribute("tabindex","0");
  dt.append(letter);
  let dd = document.createElement('dd');
  dd.append(`Description for ${letter}`);
  grid.append(dt,dd);
}

.item-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 0.5em;
  align-items: start;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 66px);
  grid-auto-rows: minmax(66px, auto);
  grid-auto-flow: row dense;
}
.item-grid>dt {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0.5em;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.item-grid>dd {
  display: none;
  grid-column: 1 / -1;
  border: 1px solid currentColor;
  margin: 0;
  padding: 0.5em;
  border-radius: 6px;
}
.item-grid>dt:focus+dd {
  display: block;
}

<dl class="item-grid"></dl>

这很好用。但是，我现在想更改设计以使用更长的文本标签，并以列的形式进行排序，即。从上到下，从左到右。

我认为将grid-auto-flow更改为column dense而不是row dense可以达到我想要的效果，但是很遗憾，好吧，看看。

const grid = document.querySelector('.item-grid');
for( let i=0; i<26; i++) {
  let letter = String.fromCharCode("A".charCodeAt(0)+i);
  let dt = document.createElement('dt');
  dt.setAttribute("tabindex","0");
  dt.append(Array.from({length:10}).join(letter));
  let dd = document.createElement('dd');
  dd.append(`Description for ${letter}`);
  grid.append(dt,dd);
}

.item-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 0.5em;
  align-items: start;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: minmax(66px, auto);
  grid-auto-flow: column dense;
}
.item-grid>dt {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0.5em;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.item-grid>dd {
  display: none;
  grid-column: 1 / -1;
  border: 1px solid currentColor;
  margin: 0;
  padding: 0.5em;
  border-radius: 6px;
}
.item-grid>dt:focus+dd {
  display: block;
}

<dl class="item-grid"></dl>

我还尝试过将column-* CSS属性与column-span: all一起使用，但是，这会在显示描述框时更改元素的顺序，而不是向下扩展空间。

从理论上讲，我可以使用JavaScript根据窗口大小将元素重新排列为正确的顺序，但是当调整浏览器窗口的大小时，这将需要更新，此外，它还会使屏幕阅读器和制表符顺序更加混乱。我更喜欢仅CSS选项。

列填充网格中的元素跨越列

0 个答案: