嵌套在 CSS 网格中

Question

为什么 align-self/justify-self: start/center/end（或任何变体）在我的 'nestedheader' 容器中工作。我试图在 left-hand 一侧获得 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 和嵌套 header 的变化。我只是将 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>

嵌套在 CSS 网格中

Nesting within CSS Grid

html

css

css-grid