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

user_5498716 0
Viewed 1051

In the attached snippet, the "header" section of the grid has text that is aligned to the left. How can I go about adding additional text that is aligned to the far right section of the grid? Also, I am wondering how to go about centering the text vertically, as it currently is above the middle. I have tried adding another div and using justify-content and align-items, but nothing I have tried so far has worked. Would appreciate any help. Thank you.

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>

grid css
2 Answers

You can create left and right <div> elements inside your header, then give the header the following styles:

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

See the example snippet below:

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>

user_91273930

Make the header element a flex container and then use

justify-content: space-between;

to align "Header" text on the left side and the additional text on the right side.

To vertically center the contents of the header, use

align-items: center;

You need to change the HTML structure of of header element as shown below:

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

and the CSS to get the desired layout:

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

Output:

enter image description here

user_60943480
Related