News Grid (9) About Page & Inner Page Grid Container(Utility)

    <section id="about">
      <div class="container">
        <div class="page-container">
          <article class="card">
            <h1 class="l-heading">About Our Organization</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore
              debitis beatae ad doloremque voluptate, blanditiis suscipit error
              quam fugit sapiente, aliquid quia libero incidunt recusandae enim
              voluptas nulla sequi similique? Temporibus ad est minima magni
              molestias obcaecati consequatur cumque exercitationem deleniti
              eos, animi facere recusandae, pariatur eveniet neque? Voluptatem,
              molestias.
            </p>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae
              dignissimos dolorum ipsam corporis similique! Quis, esse minus?
              Ducimus tempore provident sunt officia? Velit temporibus harum
              voluptate, ipsum quisquam rerum doloremque consectetur quos
              incidunt deleniti dicta excepturi ratione, fugiat ad fuga in nam
              dolorum aut minus esse voluptatum suscipit et quae. Repellendus
              minus, ratione aperiam commodi voluptas iusto aliquam sapiente.
              Aut obcaecati, corporis praesentium porro nostrum excepturi animi
              repellendus incidunt non quis nisi assumenda voluptas possimus
              molestiae laboriosam iure sed architecto in perferendis magnam
              blanditiis voluptatum placeat labore odio? Unde id dolore aliquam,
              quas sit harum, saepe maiores facilis aliquid molestiae qui.
              Praesentium rerum, minima fugit laudantium quaerat voluptatem
              pariatur sequi saepe blanditiis nobis natus possimus quo,
              assumenda numquam sit, eaque accusamus incidunt exercitationem
              quis deleniti quisquam corrupti vel? Ut quisquam consequatur,
              doloribus voluptatibus iusto quaerat, sint non magnam reiciendis
              amet quos sapiente excepturi omnis laboriosam nobis, expedita
              delectus odio provident?
            </p>
          </article>
          <aside class="car bg-primary">
            <h2>Join Our Club</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit,
              id?
            </p>
            <a href="#" class="btn btn-dark btn-block">Join Now</a>
          </aside>
        </div>
      </div>
    </section>

 

/* Inner page grid container */
.page-container {
  display: grid;
  grid-template-columns: 5fr 2fr;
  grid-gap: 1.5rem;
  margin: 2rem 0;
}

이렇게 그리드를 주면

 

 

사이드바가 너무 길게 내려오니까

 

.page-container > *:first-child {
  grid-row: 1 / span 3;
}

 

옆에 사이드바에 이제 3개까지 들어올 수 있고

더 들어 오면 왼쪽 그리드 아래로 내려감.