将按钮与网格底部对齐

要将按钮与网格底部对齐，可以使用CSS Flexbox布局来实现。以下是一个简单的示例，展示了如何实现这一效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Align to Grid Bottom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <button class="align-bottom-button">Click Me</button>
    </div>
</body>
</html>

CSS样式

/* styles.css */
.grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh; /* 设置容器高度为视口高度 */
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc; /* 可选：用于可视化容器边界 */
}

.grid-item {
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd; /* 可选：用于可视化每个网格项的边界 */
}

.align-bottom-button {
    margin-top: auto; /* 这将按钮推到容器的底部 */
}

解释

Flexbox布局：.grid-container 使用了 display: flex 和 flex-direction: column 来创建一个垂直的Flexbox容器。
高度设置：height: 100vh 确保容器占据整个视口高度。
对齐方式：justify-content: space-between 使得内容在垂直方向上均匀分布，但由于我们有一个按钮需要固定在底部，所以实际上主要依赖 margin-top: auto 来将按钮推到底部。
按钮样式：.align-bottom-button 使用 margin-top: auto 来确保按钮始终位于容器的底部。