1

I'm trying to create a website layout using CSS grid and most content is manipulated as expected using align/justify-self but two or three areas aren't but I don't know why. They are 'Nav' and 'subhead'.

I don't know how to post this with less code and still have it demonstrate other areas of code that may be causing conflict or other reasons for it to not work. For some reason I have to post more information here before I am allowed to post this question so I am writing rubbish until it will allow me to post.

.gridcontainer {
  display: grid;
  grid-gap: 5px 0px;
  grid-template-rows: 75px 75px 230px 750px 75px;
  grid-template-columns: 230px 570px;
  grid-template-areas: "banner subhead" "nav nav" "pic about" "left right" "footer footer";
  width: 80%;
  margin: 0px auto;
  overflow: hidden;
}

.banner {
  grid-area: banner;
  justify-self: start;
  align-self: center;
  height: 100%;
  width: 100%;
}

.subhead {
  grid-area: subhead;
  align-self: center;
  justify-self: start;
  font-size: 15px;
}

.nav {
  grid-area: nav;
  align-self: center;
  background-color: #5c5858;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

a {
  color: white;
  padding: 0px 30px;
}

.pic {
  grid-area: pic;
  background-color: #e4d1d1;
}
<div class="gridcontainer">
  <div class="banner">
    <h1>Your Logo</h1>
  </div>
  <div class="subhead">
    I can't get this to align.
  </div>
  <div class="pic">
    Image of plane
  </div>
  <div class="nav">
    I can't get this to align.
  </div>
  <div class="about">
    <h1>About</h1>
  </div>
</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89
Mozzarella15
  • 19
  • 1
  • 4
  • Check this https://stackoverflow.com/a/33856609/6392696 – nourza Oct 13 '18 at 19:21
  • With `align-self` and `justify-self` applied to the grid items, you're aligning the grid items. I think you're trying to align the text, which is one more level down. https://jsfiddle.net/fLgstybz/ – Michael Benjamin Oct 13 '18 at 19:32
  • 1
    This link (https://css-tricks.com/snippets/css/complete-guide-grid/) gave me the impression that align/justify-self altered the position of the content of a grid-area. It has also worked in other grid areas to achieve this. – Mozzarella15 Oct 13 '18 at 19:35
  • @Michael_B Thanks a lot for your comment, I checked out the link you gave and am just wondering why centering the content has pushed it to the end instead of the center? – Mozzarella15 Oct 14 '18 at 09:57
  • Please provide more detail. I don't see any content pushed to the end. – Michael Benjamin Oct 14 '18 at 11:12
  • Both comments I struggled to align appeared positioned at the end when I looked at your fiddle link. I have since tried it on my own code and it worked perfectly. Thanks for your help and your answer link. I think the link I provided above had me thinking the content was positioned with the align/just-self property but you have corrected that for me. – Mozzarella15 Oct 15 '18 at 12:28

0 Answers0