我试图了解在网格中执行此类操作的正确方法。因为我不确定我是否做对了。
正如问题所暗示的，主要是关于在没有额外容器的情况下围绕网格元素设置边界。但是，如果您在这里，在阅读了问题的标题后，非常感谢您做出贡献或改进 以任何可能的方式。
想法|问题
Straight forward example of how everything should look after problem is solved
我需要用元素制作单列网格布局:
- 标题
- 主要
- 页脚
那应该以浏览器为中心。
然后所有这三个元素都应该有一个边框。
此外，随着更多元素被添加到 <main> 中，布局必须能够在 heigh 中扩展元素。
限制:
- 无需创建额外的容器。
- 不使用边框 Individual Sides 属性
- 上边框
- 右边界
- 边框底部
- 左边框
到目前为止我做了什么和尝试了什么:
- 设置
html, body {height: 100%;} - 制作
<html>元素网格。 - 制作
<body>元素网格。 - 在 Grid 中定位 Grid 元素，它是单列单行
-
place-self: auto center; justify-self: center;
-
- 在
<body>周围画了一个边框元素。
html, body {height: 100%;}
html {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
body {
border: solid 5px black;
width: 50%;
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 1fr;
place-self: auto center;
justify-self: center;
}
header { background-color: #0000b7;}
main { background-color: blue;}
footer { background-color:lightblue;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<style>
</style>
</head>
<body>
<header></header>
<main>
</main>
<footer></footer>
</body>
</html>最佳答案
您的 place-self:center 使正文顶部略高于 html 文档。使用 place-self:auto center; 应该可以解决这个问题。
html, body {height: 100%;}
html {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
body {
border: solid 5px black;
width: 50%;
margin-top:5px;
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 1fr;
place-self: auto center;
justify-self: center;
}
header { background-color: #0000b7;}
main { background-color: blue;}
footer { background-color:lightblue;}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<style>
</style>
</head>
<body>
<header></header>
<main>
</main>
<footer></footer>
</body>
</html>关于css - 没有额外容器的多个网格元素周围的边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50399519/