英文:
How to move element to the end vertically in grid?
问题
body {
display: grid;
height: 500px;
align-content: start;
justify-content: center;
background: gray;
}
div {
width: 50px;
height: 50px;
background: red;
}
div:nth-of-type(3) {
align-self: end;
background: blue;
}
英文:
I need two divs to be at the top of body and one div (blue one) at the bottom of body. All of them must be centered horizontally. I need to do it using grid. What am I doing wrong? Please help.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
display: grid;
height: 500px;
align-content: start;
justify-content: center;
background: gray;
}
div {
width: 50px;
height: 50px;
background: red;
}
div:nth-of-type(3) {
align-self: end;
background: blue;
}
<!-- language: lang-html -->
<div></div>
<div></div>
<div></div>
<!-- end snippet -->
答案1
得分: 1
使用 grid-template-rows，并使用 1fr 使最后一列占据剩余的空间。
body {
margin: 0;
display: grid;
height: 100vh; /* full heught screen */
grid-template-rows: auto auto 1fr;
justify-content: center;
background: gray;
}
div {
width: 50px;
height: 50px;
background: red;
}
div:nth-of-type(3) {
align-self: end;
background: blue;
}
<div></div>
<div></div>
<div></div>
英文:
Use grid-template-rows and make the last column take the remaining space using 1fr
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
display: grid;
height: 100vh; /* full heught screen */
grid-template-rows: auto auto 1fr;
justify-content: center;
background: gray;
}
div {
width: 50px;
height: 50px;
background: red;
}
div:nth-of-type(3) {
align-self: end;
background: blue;
}
<!-- language: lang-html -->
<div></div>
<div></div>
<div></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论