使用CSS Grid无法对齐按钮的问题求助

你的align-self: end无效，核心原因是.buttons的父元素.container未设置为Grid容器，align-self作为Grid子元素属性，仅在父元素为Grid/Flex容器时生效；同时.container未占满header的高度，无法提供垂直方向的布局空间。

修改.container和.buttons的CSS代码即可实现按钮组对齐到页面底部：

.container {
    width: 75vw;
    margin: 0 auto;
    /* 新增：将container设为Grid容器，并继承header的高度 */
    display: grid;
    height: 100%;
}

.buttons {
    padding: 1vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw; /* 可选：为按钮添加水平间距 */
    /* 移除无效的justify-self，改用justify-content让按钮组水平居中 */
    justify-content: center;
    width: fit-content; /* 让按钮组宽度适配内容，便于居中 */
    /* 父元素为Grid后，align-self生效，将按钮组对齐到底部 */
    align-self: end;
}

• header已设置height: 100vh，.container通过height: 100%继承该高度，获得垂直布局所需的空间。
• gap属性可优化按钮间的视觉间距，width: fit-content确保按钮组仅占据自身内容宽度，配合justify-content: center实现水平居中。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

a {
    text-decoration: none;
    color: white;
}

.container {
    width: 75vw;
    margin: 0 auto;
    display: grid;
    height: 100%;
}

/******* Header *******/
header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
    color: white;
    position: relative;
}

.buttons {
    padding: 1vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
    justify-content: center;
    width: fit-content;
    align-self: end;
} 

.next-button, .back-button {
    border: 3px dotted rgba(97, 136, 150, 0.959);
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Arial;
    box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
    background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
    padding: 0.5vw 1vw; /* 可选：扩大按钮点击区域 */
}

.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
    transition: background 0.5s;
    background: #6dc3e063;
}

内容的提问来源于stack exchange，提问作者Sisa