Question

是否可以像弹性框一样在顶部垂直对齐网格项目？

但无需手动定义li的网格范围属性。

我希望布局可用于任意数量的列表元素

ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  border: 10px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: minmax(25px, auto);
  justify-items: top;
  grid-gap: 1em;
  grid-row-gap: 1em;
  position: relative;
}

li {
  background: red;
  display: block;
  min-width: 100%;
  max-height: 25px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

CSS User.find({ email: email }) .then(user => { if (user.length >= 1) { return res.status(409).json({ message: 'Mail exists' }) } else { User.find({ name: name }) .then(user => { if (user.length >= 1) { return res.status(409).json({ message: 'Name exist' }) } else { // SOME CODE HERE } }) } })属性用于设置内容项之间沿Flexbox的横轴或网格的块轴的间距。

align-content

ul {
  width: 400px;
  height: 300px;
  border: 10px solid green;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: minmax(25px,auto);
  align-content:start;
  grid-gap: 1em;
}

li {
  background: red;
  display: block;
  min-width: 100%;
  max-height: 25px;/* ?? */
}

ul {
  counter-reset: items
}

li::before {
  counter-increment: items;
  content: counter(items);
}

* {
  padding: 0
}

网格缩略图垂直对齐

1 个答案: