【问题标题】：A Border around multiple Grid items without additional container?没有额外容器的多个网格项目周围的边框？
【发布时间】：2018-05-17 19:49:58
【问题描述】：

我正在尝试了解在 Grid 中执行此类操作的正确方法。因为我不确定我是否做得对。

正如问题所暗示的，主要是关于在没有额外容器的情况下围绕网格项目边界。但是，如果您在这里，在阅读了问题的标题后，感谢您做出贡献或改进以任何可能的方式。

想法|问题

Straight forward example of how everything should look after problem is solved

我需要用项目制作单列网格布局：

标题
主要
页脚

应该以浏览器为中心。

那么这三个项目周围应该有一个边框。

此外，随着更多项目添加到<main> 元素中，布局必须能够扩展高度。

限制：

无需创建额外的容器。
不使用边框单独边属性
- 边框顶部
- 右边框
- 边框底部
- 左边框

到目前为止我所做的和尝试的：

设置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>

【问题讨论】：

你能更清楚地知道边界应该在哪里吗？也许是截图？
似乎<body> 正在做你想做的事。也许改用min-width，这样它就可以继续扩展？
好吧，我不能一直查看网格内的每个元素并检查它是否面向我希望它被边框的方向。我需要设计自动解决它，而无需复杂的 JavaScript 或人脑的任何干预。在网格布局项目周围有一个边框并不罕见。这是不可能的，这就是为什么我将转换为网格以定位容器（它不是像
那样的附加容器，但存在于每个 html 文档中），然后将其边框（标记）。
@Sensoray，更新了问题详情。宽度还可以。我说的是高度。在我的例子中它已经解决了。未解决的问题：查看我的输出示例：边框顶部未显示 - 这很有趣。

标签： css border grid-layout css-grid

【解决方案1】：

您的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>

【讨论】：

我不完全确定 stackoverflow 是如何工作的，但是可以通过简短的更改描述对我的问题进行编辑。还要在文本本身中添加关于“自动”自我放置的必要性的通知。顺便说一句，我已经使用了您的修复程序，因此不再需要编辑我的代码。谢谢。
@user3789797 是的，您应该能够进行编辑并添加对您所做更改的说明。如果我的回答是正确的，请不要忘记点击复选标记并将其标记为正确！

【解决方案2】：

如果你找不到东西，这里有一个快速破解：

<header style="border:1fr 1fr 0 1fr"></header>
<main style="border:0 1fr 0 1fr"></main>
<footer style="border:0 1fr 1fr 1fr"></footer>

例如从header 删除底部边框，从main 删除顶部和底部边框，并从footer 删除顶部边框。并确保它们之间没有边距。这应该会创建一个无缝边框。

【讨论】：