嵌套在 CSS 网格中

Question

为什么 align-self/justify-self: start/center/end（或任何变体）在我的“nestedheader”容器中工作。我正在尝试获取左侧的 Header 框，但我觉得它已经应该是网格中的样子了。

.header {
    grid-area: header;
    background-color: #222222;
}
.nestedheader {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 70px;
    grid-gap: 20px;
    grid-template-areas: "headername headername headercopy headercopy" "headername headername headercopy headercopy";
    color: white;
    font-family: 'Rubik', sans-serif;
}
.headername {
    grid-area: headername;
    font-size: 30px;
    padding-right: 20px;
    border: 5px solid red;
    justify-self: start;
}
.headercopy {
    grid-area: headercopy;
    font-weight: lighter;
    padding-right: 20px;
    border: 5px solid red;
}

这里是 CodePen：https://codepen.io/anon/pen/dezVpO

Answer 1

你的代码很好。您唯一没有检查的是.header 和.nestedheader 的大小。 他们没有填满整个第一行。

查看 header 和 nestedheader 的更改。我只是将width 设置为 100%。

html, body {
	margin: 0;
	font-size: 100%;
}

.container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: minmax(100px, auto);
	grid-gap: 7px;
	grid-template-areas:
	"header header header header"
	"intro intro main main"
	"intro intro main main"
	"bottom bottom bottom bottom"
	"bottom bottom bottom bottom"
	"footer footer footer footer";
	text-align: center;
}
.container > div {
	padding: 5px;
	border: 3px solid #222222;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2B0E24;
}

/* --- Header Start --- */

.header {
	grid-area: header;
  box-sizing: border-box;
  width: 100%;
	background-color: #222222;
}
.nestedheader {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	grid-template-areas:
	"headername headername headercopy headercopy";
	color: white;
	font-family: 'Rubik', sans-serif;
}
.headername {
	grid-area: headername;
	font-size: 30px;
	padding-right: 20px;
	border: 5px solid red;
}
.headercopy {
	grid-area: headercopy;
	font-weight: lighter;
	padding-right: 20px;
	border: 5px solid red;
}

/* --- Header End --- */

.intro {
	grid-area: intro;
	height: 450px;
}
.main {
	grid-area: main;
	height: 450px;
}
.bottom {
	grid-area: bottom;
	height: 800px;
}
.footer {
	grid-area: footer;
	height: 325px;
	background-color: #222222;
	color: white;
}

/* --- Footer Start --- */

.footertext {
	color: white;
	font-family: 'Rubik', sans-serif;
	font-size: 30px;
}
.footerlinks {
    font-size: 16px;
    font-weight: lighter;
}
a {
    color: #20bde5;
    text-decoration: none;
    padding: 10px;
}
a:hover {
    color: white;
}

/* --- Footer End --- */

	<div class="container">

		<!-- Header Start -->

		<div class="header">
			<div class="nestedheader">
				<div class="headername">Header Name</div>
				<div class="headercopy">This is the page copy</div>
			</div>
		</div>

		<!-- Header End -->


		<div class="intro">Intro</div>
		<div class="main">Main</div>
		<div class="bottom">Bottom</div>

		<!--Footer Start-->

		<div class="footer">
			<div class="footertext">
				Here we go...<br><br>
				<div class="footerlinks">
					<a href="About Link">about</a>
					<a href="Contact Link">contact</a>
					<a href="Social Link">social</a>
				</div>
			</div>

		<!--Footer End-->
	</div>