Question

const items = Array.from(column.children)

const widths = items.map(item => item.offsetWidth)

const widest = widths.reduce((widest, current) => widest > current ? widest : current, 0)

items.map(item => item.style.width = `${widest}px`)

body {
  margin: 0;
}

body * {
  font-family: Helvetica;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

#column {
  grid-auto-columns: max-content;
  grid-auto-flow: column;
}

li {
  text-align: center;
  padding: 10px 10px;
  color: lightcyan;
  background: lightseagreen;
  border-right: 2px solid lightcyan;
}

<ul id="column">
  <li>S</li>
  <li>Med</li>
  <li>Widest Item</li>
</ul>

我正在使用一些JavaScript使列表项适合列表中的最大项。如何仅使用CSS来完成此操作？

这也可以从网格中的行的角度来看。

Answer 1

只需将UL的显示设置为inline-block。

已更新，对于水平，您可以将（flex，inline-flex）与css-grid混合使用。使用flex或inline-flex类型的包装器div。

body {
  margin: 0;
}

body * {
  font-family: Helvetica;
}


div {
  display: inline-flex;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


li {
  text-align: center;
  padding: 10px 10px;
  color: lightcyan;
  background: lightseagreen;
  border-right: 2px solid lightcyan;
}

<div>
  <ul id="column">
    <li>S</li>
    <li>Med</li>
    <li>Widest Item</li>
  </ul>
</div>

CSS网格：使网格列适合最宽的列

1 个答案: