CSS设置两列响应式卡片，其中一列卡片支持滚动

该代码可创建一个具有两列和可滚动内容的 CSS 卡片，CSS 代码实现了渐变背景和响应式设计。两列div卡片，其中一列固定不动可作为标题或者文章简介使用，另一列可放置长篇详细内容，该列支持持续滚动，该卡片有助于以时尚的方式显示有条理的信息。

如何创建具有两栏和可滚动内容的 CSS 卡片

1、设置 HTML 结构。我们将创建一个 <article> 元素，其类为 "container"，用于包含我们的卡片。在这个容器中，我们将有两个 <section> 元素：一个用于介绍内容，另一个用于详细内容。详细内容部分将包含一个可滚动区域，用于显示长篇文字。

<article class="container">
    <section class="intro flow">
        <h2>月迹</h2>
        <p>贾平凹《月迹》经典散文赏析，我们这些孩子，什么都觉得新鲜，常常又什么都不觉得满足；中秋的夜里...</p>
        <button>查看更多...</button>
    </section>
    <section class="details">
        <header>页头</header>
        <div class="scroll-container">
            原来月亮是长了腿的，爬着那竹帘格儿，先是一个白道儿，再是半圆，渐渐地爬得高了...
        </div>
        <footer>页脚</footer>
    </section>
</article>

2、现在，让我们添加 CSS 样式，为我们的卡片实现所需的布局和设计。

/*部分代码，下载后查看完整版代码*/
.details {
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-border-before: var(--border);
          border-block-start: var(--border);}

最后，您可以在 <section> 元素中添加内容。介绍部分可以包含标题、文本和按钮，而第二个section详细内容处可以包含更多需要滚动的内容。

以上就是全部内容！希望你已经在网站上成功创建了双栏 CSS 卡片。