布局网格在卡css，我想价格和按钮在底部的左下方和右下方

布局网格（Grid Layout）是一种强大的CSS布局系统，它允许开发者通过定义行和列来创建复杂的二维布局。在你的场景中，你希望将价格放在底部的左下方，将按钮放在底部的右下方。以下是实现这一布局的基础概念和相关代码示例。

基础概念

CSS Grid Layout: 这是一个二维布局系统，允许你通过定义行和列来创建复杂的布局。
Grid Container: 应用了 display: grid 或 display: inline-grid 的元素。
Grid Items: 容器内的子元素。
Grid Lines: 定义行和列的边界线。
Grid Areas: 可以将网格划分为多个区域，并将元素放置在这些区域中。

类型

固定布局: 行和列的大小是固定的。
自适应布局: 行和列的大小可以根据内容或容器大小自动调整。

应用场景

仪表盘: 如数据分析仪表盘。
产品列表: 如电商网站的产品展示。
表单布局: 如复杂的注册或登录表单。

示例代码

以下是一个简单的示例，展示了如何使用CSS Grid Layout将价格放在底部的左下方，将按钮放在底部的右下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <style>
        .card {
            display: grid;
            height: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            gap: 10px;
            grid-template-areas:
                "content content"
                "price button";
            grid-template-rows: auto 1fr;
            grid-template-columns: 1fr 1fr;
        }

        .content {
            grid-area: content;
        }

        .price {
            grid-area: price;
            align-self: end;
            justify-self: start;
        }

        .button {
            grid-area: button;
            align-self: end;
            justify-self: end;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="content">
            <h2>Product Title</h2>
            <p>This is a description of the product.</p>
        </div>
        <div class="price">$19.99</div>
        <button class="button">Buy Now</button>
    </div>
</body>
</html>