News Grid (6) Home Articles Grid

 

 <section id="home-articles" class="py-2">
    <div class="container">
        <h2>Editor Picks</h2>
        <div class="articles-container">
          <article class="card">
            <img src="img/articles/ent1.jpg" alt="">
            <div>
              <div class="category category-ent">Entertainment</div>
              <h3>
                <a href="article.html">Lorem ipsum dolor sit amet</a>
              </h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
            </div>
          </article>
          <article class="card bg-dark">
            <div class="category category-sports">Sports</div>
            <h3>
              <a href="article.html">Lorem ipsum dolor sit amet</a>
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
          </article>
          <article class="card">
            <img src="img/articles/tech1.jpg" alt="">
            <div class="category category-tech">Technology</div>
            <h3>
              <a href="article.html">Lorem ipsum dolor sit amet</a>
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
          </article>
          <article class="card">
            <div class="category category-sports">Sports</div>
            <h3>
              <a href="article.html">Lorem ipsum dolor sit amet</a>
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
            <img src="img/articles/sports1.jpg" alt="">
          </article>
          <article class="card">
            <img src="img/articles/tech2.jpg" alt="">
            <div class="category category-tech">Technology</div>
            <h3>
              <a href="article.html">Lorem ipsum dolor sit amet</a>
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
          </article>
          <article class="card bg-primary">
            <div class="category category-sports">Sports</div>
            <h3>
              <a href="article.html">Lorem ipsum dolor sit amet</a>
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
          </article>
          <article class="card">
            <div>
              <div class="category category-ent">Entertainment</div>
              <h3>
                <a href="article.html">Lorem ipsum dolor sit amet</a>
              </h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus.</p>
            </div>
            <img src="img/articles/ent2.jpg" alt="">
          </article>
        </div>
    </div>
  </section>

 

 

 

.card {
  background: #fff;
  padding: 1rem;
}

- 각 아티클의 배경색과 패딩을 준다.

 

 

 

#home-articles .articles-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

articles-container를 grid로 만들어주면

repeat(3, 1fr)이기 때문에 column이 3개, 각자 1fr씩.

 

 

 

 

 

#home-articles .articles-container > *:first-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  grid-column: 1 / span 2;
  align-items: center;
}

 

#home-articles .articles-container > article:first-child로 해도 되지만

좀 더 flexible하게 나중에 html에서 tag를 바꿔도 css가 작동할 수 있게

#home-articles .articles-container > *:first-child로 선언해서

첫 번째 article을 선택.

 

 

 

#home-articles .articles-container > *:first-child,
#home-articles .articles-container > *:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  grid-column: 1 / span 2;
  align-items: center;
}

#home-articles .articles-container > *:last-child {
  grid-column: 2 / span 2;
}

 

마지막 article도 추가했으나 마지막 article은 2번째 칼럼에서 시작해서 두 칸 늘일 것이기 때문에

따로 한번 더 grid-column: 2 / span 2; 를 주었다.