title: CSS grid not aligning in Y-axis
body: <p>It's a small problem but I don't get it. I am just trying to align the text in y-axis, but it only goes a little distance down when I put align-self : end or center. Container is the main grid, which contains the <em>col</em> div (columns) which has the <em>con</em> div (content) which contains the text inside the <em>box</em> div</p>
  
  <p>CSS</p>
  
  <pre><code>.container{
  
    display: grid;
    grid-template-columns: repeat(4,22.45em);
    grid-template-rows: 48rem;
    grid-template-areas:
    "colone coltwo colthr colfour";
    /*text-align: center;*/
  
  }
  .con{
    /*
    padding-left: 0.5rem auto;
    padding-right: 0.5rem auto;
    padding-top: 0.5rem auto;
    padding-bottom: 0.5rem auto;*/
    display: grid;
    grid-area: con;
  
    justify-content: center;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  
    position: relative;
  }
  .col{
    border-right: 0.005rem solid white;
  
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 16rem;
    grid-template-areas: "con";
    color: grey;
    z-index: 1;
  }
  .box{
    position: absolute;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    justify-self: start;
    align-self: end;
  }
  </code></pre>
  
  <p>here is the codepen link : <a href="https://codepen.io/aronnora/project/editor/DkyrVM" rel="nofollow noreferrer">https://codepen.io/aronnora/project/editor/DkyrVM</a></p>