使网格项重叠

Question

我正在尝试实现CSS网格模式，其中标题覆盖下一行。

我在顶部添加了代码片段，附件中的图像应显示您正在尝试实现的目标。

谢谢

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

Answer 1

您正在使用该grid-template-areas属性使用ASCII艺术作品安排布局。

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  ...
}

此方法适用于不重叠的网格区域。

但是字符串不能在代码中重叠，因此该方法不能用于覆盖网格区域。

换句话说，"header header header"并且"nav article ads"可以在X和Y轴上彼此上下，但不能在Z轴上。

要使网格区域重叠，您需要另一种方法。

CSS Grid提供了基于行的放置方式来替代grid-template-areas。

实际上，基于行的放置是指使用以下以下属性来确定网格项目的大小和位置：

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

和速记：

• grid-column
• grid-row

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  ...
}

body {
  display: grid;
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;       /* shorthand for grid-row-gap and grid-column-gap */
  height: 100vh;
  margin: 0;
}
#pageHeader {
  grid-row: 1;          /* see notes below */
  grid-column: 1 / 4;   /* see notes below */
  background-color: crimson;
  z-index: 1;
  opacity: .5;
}
#pageFooter {
  grid-row: 3;
  grid-column: 1 / 4;
}
#mainArticle {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
#mainNav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
#siteAds {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
}

在grid-row和grid-column属性控制的网格项目的位置和大小。

• grid-column: 1 / 4 表示网格项目将跨越网格列线一到四（即，该项目将跨越第一，第二和第三列）
• grid-row: 3表示网格项将位于第三行（从网格第3行到auto，这是默认值，当省略第二个值时将应用该网格项。）

使用这种放置网格项目的方法，可以轻松地使它们重叠。

jsFiddle