CSS-Grid从下一列开始

Question

我有一个包含内容的3列CSS网格。我尝试使它像这样：如果内容太多，则应转到下一列。

但是我无法使其正常工作。你有什么提示吗？

.details {
        background: #000;
        color: #fff;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 100%);
        grid-column-gap: 2px;
        grid-row-gap: 2px;
        .detail {
          text-align: left;
          padding: 10px;
        }
}

Answer 1

您可以使用CSS列和浮动伪元素将内容最多推到第一列：

可能的示例以全页运行和测试：

• [column-count中的3列

body {
  margin: 0;
}

div {
  column-count: 3;
}

div p::before {
  content: '';
  padding-bottom: 90vh;
  float: left;
}


/* extra styling */

div {
  column-rule: double gray;
  margin: 1em;
  border: solid;
  box-sizing: border-box;
  background: rgb(243, 241, 121);
}

div h1,
p {
  width: 80%;
  margin: 1em auto;
  text-indent: 1em;
  text-align: justify;
}

<div>
  <h1>Column CSS</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

• 或将column-width设置为column-count以响应行为：

body {
  margin: 0;
}

div {
  column-width: 18em;
}

div p::before {
  content: '';
  padding-bottom: 90vh;
  float: left;
}


/* extra styling */

div {
  column-rule: double gray;
  margin: 1em;
  border: solid;
  box-sizing: border-box;
  background: rgb(243, 241, 121);
}

div h1,
p {
  width: 80%;
  margin: 1em auto;
  text-indent: 1em;
  text-align: justify;
}

<div>
  <h1>Column CSS</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

可能不如您想象的那么完美：codepen demo to play with