如何在 CSS 网格中的 header 左右两侧放置内容？

Question

在附加的代码片段中，网格的“header”部分有左对齐的文本。我怎样才能添加与网格最右侧部分对齐的附加文本？另外，我想知道如何将文本垂直居中，因为它目前位于中间上方。我已经尝试添加另一个 div 并使用 justify-content 和 align-items，但到目前为止我没有尝试过。将不胜感激任何帮助。谢谢。

body {
  display: grid;
  grid-template-areas: "header header header" "nav article ads" "nav 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;
}

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;
}


/* 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 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

您可以在页眉中创建 left 和 right <div> 元素，然后为页眉提供以下样式：

#pageHeader {
  display: flex;
  align-items: center;             /*center children*/
  justify-content: space-between;  /*separate children*/ 
}

请参阅下面的示例代码段：

body {
  display: grid;
  grid-template-areas: "header header header" "nav article ads" "nav 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;
}

header,
footer,
article,
nav,
div {
  padding: 1.2em;
  background: gold;
}

#pageHeader {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}

#siteAds {
  grid-area: ads;
}


/* 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;
  }
}

<!doctype html>
<title>CSS Grid Template 1</title>
<link rel="stylesheet" href="style.css">

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

Answer 2

使 header 元素成为弹性容器，然后使用

justify-content: space-between;

在左侧对齐“页眉”文本，在右侧对齐附加文本。

要使 header 的内容垂直居中，请使用

align-items: center;

您需要更改 header 元素的 HTML 结构，如下所示：

<header id="pageHeader">
  <span>Header</span>
  <span>I will be on right side</span>
</header>

和 CSS 以获得所需的布局：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

输出：

如何在 CSS 网格中的 header 左右两侧放置内容？

How can I place content on both the left and right sides of my header in this CSS grid?

css

grid