CSS Grid 수업 필기(2) Spanning Columns and 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 class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>
  </div>

 

.grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

 

우선 4개의 columns에 1fr씩.

 

 

 

.item:first-child {
        grid-column-start: 1;
        grid-column-end: 4;
}

item1을 span하고 싶을 때.

item1의 왼쪽 border을 1번이라고 생각해서,

1번 줄에서 시작해서 4번째 줄까지 아이템을 늘여줌. (칸으로 따지면 3칸)

(아래 그림이 적용된 모습)

 

 

 

.item:first-child {
        grid-column-start: 1;
        grid-column-end: 4;

        grid-row-start: 1;
        grid-row-end: 3;
}

row도 1번줄에서 시작해서 3번줄까지 (칸으로 따지면 2칸)

 

 

.item:first-child {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
}

코드 줄여서 쓰기!

grid-column: 1 / span 3;은 1번 칸에서 시작해서 칸 3개 늘리겠다.

grid-row:1 / span2;는 1번 칸에서 시작해서 칸 2개 늘리겠다.

 

위 코드랑 정확히 같은 결과를 출력한다.