display: grid;でのjustify-selfが効かない

Question

前提

YouTubeの
Responsive hero | Build a responsive website from scratch (Part 7)
https://www.youtube.com/watch?v=oR4y973fDQ4&t=777s
34:00あたりにきてます。

実現したいこと

copyrightを右に寄せたいです。
お手本の動画

発生している問題・エラーメッセージ

現状

該当のソースコード

該当箇所に🙋🙋マークがあります。

      <div class="footer__cta">
        <a href="#" class="button">Request invite<a>

      </div>

      <div class="footer__copyright">
        <!-- ⭐特殊記号！！ -->
        &copy; EasyBank. All Rights Reserved.</div>

.footer {
    background-color: #2D314D;
    color: white;
    text-align: center;
    padding: 2.5rem;
}

.footer a {
    color: white;
 
}


.footer__logo {
    /* 7/7 19:10  the margin did
work for the other elements because those are divs and is by nature they are
by default display block elements */
    display: inline-block;
    margin-bottom: 1.875rem;

}



.footer__social {
    margin-bottom: 1.875rem;
}

.footer__social a {
    display: inline-block;
}

/* 7/7 20:00⭐not last-childがないときれいにセンターにならない */
.footer__social a:not(:last-child) {
    margin-right: 1rem
}


.footer__links {

    display: flex;
    /* ⭐7/7 21:00 */
    flex-direction: column;
    /*  because it's vertical align items should control the width of
the children  */
align-items: center;

}

.footer__links a {
    /* a 自体にline-height */
    line-height: 2.5;
}

.col1 {
}

.col2 {
    /* margin-bottom: 1.875rem; */
}

.footer__cta {
    margin: 1.875rem;

}

🙋🙋
.footer__copyright {
    font-size: 0.8125rem;
    color: hsl(233, 8%, 62%);

}

.attribution {
    margin-top: 1.875rem;

}

@media screen and (min-width: 768px) {

  .footer__links {
    align-items: baseline;
  }


  /* grid */
  .grid-container {
    display: grid;
    grid-template-columns:  2fr 1fr 1fr 3fr;
    /* grid-template-rows: repeat(2, 1fr); */
    grid-template-rows: 1fr auto;
    grid-template-areas: 
    /* 複数のrowを同じのがまたぐときは２回言う */
    "logo links1 links2 cta"
    "social links1 links2 copyright";

    justify-items: start;
    text-align: left;


  }

  .footer__logo {
    grid-area: logo;
  }

  .col1 {
    grid-area: links1;
  }

  .col2 {
    grid-area: links2;


  }

  .footer__cta {
    grid-area: cta;

    /* margin: 0 0 1.875rem 0; */
    justify-self: end;
    text-align: right;

  }

  .footer__social {
    grid-area: social;

  }

🙋🙋
  .footer__copyright {
    grid-area: copyright;

    justify-self: end;
    text-align: right;
  }

}

試したこと

mixin.css内で

  .footer__copyright {
    grid-area: copyright;

    display: flex;
    justify-self: end;
  }

をしてみましたが、変わりませんでした。。。

Comments

[hatena19]

現象を再現できるコードを提示してください。
HTMLに grid-containerクラスがないので、再現できません。
あと、a要素の閉じタグがないのでまずはそれを修正してみてください。

[Iori]

ありがとうございます。</a>に直したら正常に表示されました。

Answer 1

a要素の閉じタグがないのを修正して、grid-containerクラスのブロックで囲んだら、justify-self: end; は効きましたよ。

<div class="grid-container">
  <div class="footer__cta">
    <a href="#" class="button">Request invite</a><!-- 閉じタグに修正！！ -->
  </div>

  <div class="footer__copyright">
    <!-- ⭐特殊記号！！ -->
    &copy; EasyBank. All Rights Reserved.
  </div>
</div>