单行网格布局没有网格模板行黑客攻击

Question

我希望有一个项目的描述列表，通过使用CSS网格，它们位于单个行上，每个项目的宽度变化很小，并且当宽度变得太小而无法容纳它时，它会隐藏每个项目。 / p>

到目前为止，我已经提出了这个问题，它充分利用了auto-fill的{​​{1}}和minmax属性。目前我有一个黑客隐藏不适合的项目。这是设置grid-template-columns，但也要在overflow: hidden中设置相对于列表中项目数量的大量0。如果您移除grid-template-rows（并调整宽度），您会看到下面有溢出的项目。

有没有办法可以隐藏这些溢出的元素而不需要对大量的grid-template-rows进行硬编码？

0

div {
  display: inline-block;
}

dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-column-gap: 20px;
  grid-template-rows: 1fr 0 0 0 0 0 0 0 0 0 0 0 0 0 0;
  overflow: hidden;
}

dd {
  font-weight: bold;
  margin: 0;
}

Answer 1

它不是一个不同的解决方案，但使用repeat()可以避免写出一堆0 s。

所以，请改用grid-template-rows: 1fr repeat(50, 0);：

或者，您可以将高度设置为dl，比如说80px，然后使用grid-template-rows: repeat(auto-fill, 80px);。如果内容的长度/高度可变，则可能无法选择此选项。

＆＃13;

＆＃13;

div {
  display: inline-block;
}

dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  grid-column-gap: 20px;
  grid-template-rows: repeat(auto-fill, 80px);
  overflow: hidden;
  height: 80px;
}

dd {
  font-weight: bold;
  margin: 0;
}

＆＃13;

<dl>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
  <div>
    <dt>Column name</dt>
    <dd>Example value</dd>
  </div>
</dl>

＆＃13;

＆＃13;

＆＃13;