css 中的卡片布局，使用网格

Question

我想为我的 html 元素创建一个卡片布局。我遇到了这个 beautiful exposition by Jen Simmons, but it implements the idea using columns。问题是 columns 不允许控制每列的宽度，这意味着每列的宽度相等。

由于在我的网页中我想控制列宽，所以我变成了grid:

main {
  display: grid;
  grid-template-columns: 60% 40%;
}

我的问题来了：如何使用 grid 实现所需的卡片布局？

期望的视觉效果是每个框（元素）都出现在其上方的框之后，而不考虑框在其右侧或左侧的高度。

下图演示：

有什么帮助吗？

我的代码：

body {
  margin: 10px;
  width: 500px;
}

main {
  display: grid;
  grid-template-columns: 60% 40%;
}

section {
  margin: 10px;
  border: 1px solid black;
}

<main>
  <section class="A">
    <h3>Header 1</h3>
    <p>Short text</p>
  </section>
  <section class="B">
    <h3>Header 2</h3>
    <p>Some Very long and boring text that lasts over a few lines.</p>
  </section>
  <section class="C">
    <h3>Header 3</h3>
    <p>Some text. Lorem ipsum dolor sit amet.</p>
  </section>
</main>

Answer 1

我的做法是重新构建你的页面，因为同一行的网格元素都是一个块，所以如果你把它们分成左列和右列，你可以实现这个效果。

我所做的只是将 div 分成左右两列，根据列而不是行分别确定每一个的高度。

body {
            margin: 10px;
            width: 500px;
        }

        main {
            display: grid;
            grid-template-columns: 60% 40%;
        }

        section {
            margin: 10px;
            border: 1px solid black;
        }

        .B {
            height: 60%;
        }

<body>

    <main>
        <div class="rContainer">
            <section class="A">
                <h3>Header 1</h3>
                <p>Short text</p>
            </section>

            <section class="C">
                <h3>Header 3</h3>
                <p>Some text. Lorem ipsum dolor sit amet.</p>
            </section>
        </div>
        <div class="rContainer">
            <section class="B">
                <h3>Header 2</h3>
                <p>Some Very long and boring text that lasts over a few lines.</p>
            </section>
        </div>

    </main>
</body>

css 中的卡片布局，使用网格

Card layout in css, using grid

html

css

css-grid