CSS Grid 수업 필기(1) grid-template-columns, grid-template-rows

• grid-template-columns

기본 셋팅

.item {
        padding: 3rem;
        background: #f4f4f4;
        border: #ccc 1px solid;
        text-align: center;
        font-weight: bold;
        font-size: 1.4rem;
 }​

<div class="grid">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
</div>

 

 

 

.grid{
   display:grid;
   grid-template-columns: 300px 300px 300px;
}

 

우선 컨테이너에 display:grid; 선언

(display:flex와 다르게 아무 변화 없음)

 

grid-template-columns에 만들고 싶은 column의 갯수와 너비를 설정.

저렇게 하면 한 줄에 3개의 아이템이 배치되고 각각 300px씩 가지게 된다.

item이 여러개면 그 다음 줄로 넘어가서 차례대로 300px씩 너비를 가지며 배치된다.

 

 

 

grid-template-columns: 300px 300px auto;

이렇게 한 column을 auto로 설정하면, 다른 column이 각각 300px씩 차지하고 나머지 부분을 다 그 column이 차지하게 된다.

 

 

grid-template:columns: auto auto auto;
grid-template-columns: repeat(3, auto);

화면 크기에 맞게 각 아이템을 1:1:1의 너비로 배치하고 싶으면 모두 auto 값을 주면 되는데,

같은 value가 반복될 때는 repeat을 이용해서 간단하게 표현할 수 있다.

repeat 안에 처음으로 들어가는 값은 반복되는 횟수(즉, column의 수와도 같겠고), 반복하고자 하는 너비 값을 넣어 주면 된다.

 

 

grid-template-columns: 1fr 3fr;

또 다른 선언 방법. fr은 fraction을 의미한다. 

저렇게 값을 주면 아이템의 너비가 1:3의 비율로 배치된다.

 

 

 

grid-gap: 1rem;

grid-gap 속성을 사용하면 다닥다닥 붙어있는 아이템들 사이에 gap을 줄 수 있다.

(즉, 아이템들에 따로 margin을 설정할 필요가 없다는 아주아주아주 반가운 소식!)

 

 

 

 

- 실습! 메인 속 sidebar

 <main>
      <section>
        <h3>Welcome To My Site</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit
          reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus
          eos et mollitia velit vel molestias sint dolore at doloremque neque
          minima optio ad tempore quisquam perferendis esse non. Aliquam illum
          doloremque architecto! Rem voluptas at sunt sed enim eius laborum
          dolores quaerat?
        </p>
      </section>
      <aside>
        <h3>Contact Us</h3>
        <ul>
          <li>Some Company</li>
          <li>50 Main st, Boston MA</li>
          <li>something@something.com</li>
          <li>555-555-5555</li>
        </ul>
      </aside>
    </main>

aside 태그 속 내용을 사이드 바로 보내고 싶다면?

 

 

main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 1rem;
}

아이템들의 컨테이너에 해당하는 main 태그에

display:grid를 선언하고

아이템이 2개고 3:1의 너비 비율을 원하기 때문에

grid-template-columns:3fr 1fr;로 선언.

아이템들이 다닥다닥 붙어 있지 않고 사이에 틈이 있었으면 좋겠으니까

grid-gap:1rem;

을 준다.

 

 

 

• grid-template-rows

<div class="grid">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
</div>

  .grid {
        display: grid;
        grid-gap: 1rem;
        grid-template-rows: 1fr 3fr 1fr;
}

아이템이 10개인데 grid-template-rows 속성 값으로 3개만 주면

처음 3개의 아이템이 1:3:1의 비율

나머지는 그냥 원래 자신의 크기대로 배치된다.

(아래 그림 참고)

 

 

 

      .grid {
        display: grid;
        grid-gap: 1rem;
        grid-template-rows: 1fr 3fr 1fr;
        /* Set implicit rows */
        grid-auto-rows: 3fr;

  }

grid-auto-rows 속성에 값을 주면 나머지 item들의 너비가 다 3fr로 설정된다.

 

 

 

 

grid-template-columns와 합치면?

.grid {
        display: grid;
        grid-gap: 1rem;
        grid-template-rows: 1fr 3fr 1fr;
        /* Set implicit rows */
        grid-auto-rows: 3fr;
        grid-template-columns: repeat(2, 1fr);
}