想法|问题

Question

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

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

想法|问题

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

我需要使用以下项目制作单个列网格布局：

标题
Main
页脚

那应该以浏览器为中心。

然后这三个项目周围应该有一个边框。

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

限制：

无需创建其他容器。
不使用边框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>

Answer 1

你的place-self:center使得身体最高位置略高于html doc。使用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>

Answer 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>

e.g。移除header的底部边框，main的顶部和底部边框以及footer的顶部边框。并确保它们之间没有余地。这应该创建一个无缝边框。

围绕多个网格项目的边框没有其他容器？

想法|问题

限制：

2 个答案: