[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 12 CSS 그리드 레이아웃으로 배치하기

DAY 17

🔖 오늘 읽은 범위 :

☃️01/27(화) 진도표 알림
❄️공부 내용: 12 CSS 그리드 레이아웃으로 배치하기
❄️ 쪽수: 373~392쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

• 격자 형태로 요소를 배치할 수 있음.
• 플렉스 박스 레이아웃과 함께 사용 가능함.

CSS 그리드 레이아웃 사용하기

CSS 그리드 레이아웃 용어

• 그리드 항목을 배치할 때 가로와 세로 방향 모두 사용함.
  • 플렉스 항목은 1차원 이나, CSS 그리드 레이아웃은 2차원 적임.
• 배치할 항목을 컨테이너로 묶어야 함.
• 구조
  • 부모 요소 : 그리드 컨테이너
  • 자식 요소 : 그리드 항목 또는 셀(cell)
  • 가로 방향 : 행(row)
  • 세로 방향 : 열(column)
  • 간격

CSS 그리드 레이아웃 항목을 배치하는 속성

• 그리드 컨테이너 지정 : display 속성

  • grid : 블록 레벨의 그리드 컨테이너 생성.
  • inline-grid : 인라인 레벨의 그리드 컨테이너 생성.

• 열과 행을 지정 : grid-template-columns, grid-template-rows

  • grid-template-columns : 그리드 열 크기(너비)와 개수 지정. 각 열의 너비를 순서대로 나열.

  • grid-template-rows : 그리드 행 크기(높이)와 개수 지정. 각 행의 높이를 순서대로 결정.

    <style>
      .container {
        display: grid; /* grid container 지정 */
        grid-template-columns: 100px 100px 100px; /* 열 너비 지정 */
        grid-template-rows: 50px 100px; /* 행 높이 지정 */
      }
    </style>

• 동적 행 높이 지정 : grid-auto-rows 속성

  • 동적으로 변경되는 것에 대한 대응. 행의 개수를 알 수 없음.

  • 행의 높이를 지정함.

    <style>
      .container {
        display: grid;
        grid-template-columns: 100px 200px 300px;
        grid-auto-rows: 100px;
      }
    </style>

• 상대적인 크기 지정 : fr 단위(fraction)

  • 열이나 행의 크기를 픽셀(px)을 이용하면 항상 크기가 고정됨.

  • 상대적인 크기 지정을 위해서 필요함.

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 2fr; // 열 너비 2:1:2

• 반복 되는 값 표현 : repeat() 함수

  • 표현 되는 값을 여러 번 반복 할 때 간단하게 표현할 수 있음.

    grid-template-columns: repeat(3, 1fr);

• 최솟값과 최댓값 지정 : minmax() 함수

  • 행 높이를 고정하지 않고 최솟값과 최댓값을 사용해 유연하게 지정 처리 가능함.

  • 내용이 많아도 다 표시 할 수 있게 높이를 늘린다거나 최소 높이를 지정하게 해둘 수 있음.

    <style>
    .container {
      width:600px;
      border: 1px solid #ccc;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: minmax(100px, auto);
    }
    </style>

• 빈공간 자동 채우기 : auto-fit 속성, auto-fill 속성

  • repeat , minmax 함수를 이용해 최소 크기 100px 인 그리드 항목 5개 표시

      grid-template-columns: repeat(5, minmax(100px, 1fr));

  • 위 방법은 1행에 몇 개의 열을 배치할지 알아야 함.

  • 개수를 고정하거나 매번 지정하기 어려울 때 사용 가능함.

    • auto-fit : 그리드 컨테이너 너비를 가득 채우도록 그리드 항목을 확장함. 내용이 많지 않은 경우에도 넓게 확장 시키므로 반응형 동작할 때 유의해서 사용해야 함.
    • auto-fill : 그리드 항목 너비를 지정한 크기 만큼 유지하고 남은 공간이 있을 경우 그대로 유지함.

    

• 그리드 항목의 간격 조절 : gap 속성

  • 그리드 컨테이너 안에서 그리드 항목 간격 지정하지 않으면 서로 붙어서 배치 됨.

  • 항목 간격 조정을 위해서 필요함.

  • 예전에는 grid-column-gap, grid-row-gap 으로 사용했으나, 지금은 gap 속성 하나로 통일 됨.

  • 값 지정이 1개 일 경우, 열 간격과 행 간격을 동일하게 적용.

  • 값 지정이 2개 일 경우, 1번째 값은 행 간격, 2번째 값은 열 간격 적용.

    gap: 20px 30px; /* 행 간격 20px, 열 간격 30px */

그리드 라인과 템플릿 영역으로 배치하기

• 좀 더 복잡한 레이아웃 만들기 위한 그리드 라인과 템플릿 영역.

그리드 라인을 사용해 배치하기

• 그리드 레이아웃에는 눈에 보이지 않는 그리드 라인이 포함되어 있음.

• 개발자 도구 → ‘grid’ 표시 클릭 → 그리드 라인과 번호가 함께 표시 됨.

• 표시되는 그리드 라인과 번호를 이용해서 그리드 항목을 배치할 수 있음.

• 그리드 라인에서 항목 배치에 사용하는 속성

  속성	설명	예시
  grid-column-start	열의 시작 번호 지정.	grid-column-start: 1;
  grid-column-end	열의 끝 번호 지정.	grid-column-end: 4
  grid-column	열의 시작과 끝 번호 지정. 슬래시(/)로 구분.	grid-column: 1 / 4;
  grid-row-start	행의 시작 번호 지정.	grid-row-start: 2;
  grid-row-end	행의 끝 번호 지정.	grid-row-end: 4;
  grid-row	행의 시작과 끝 번호 지정. 슬래시(/)로 구분.	grid-row: 2 / 4;

• 항목 배치

    /* 열 1라인 ~ 4라인 차지. */
    grid-column: 1 / 4;
    /* 열 1 라인에서 끝까지 차지. */
    grid-column: 1 / -1;

• 해당 속성을 빼도 기본적으로 열 1개나 행 1개를 차지함.

.container {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1rem;
}

.box {
  padding: 15px;
  color: #fff;
  text-align: center;
}

.box1 {
  background-color: #3689ff;
  grid-column: 1 / -1; /* grid-column: 1 / 4; */
  grid-row-start: 1; /* grid-row: 1 / 2; */
}

.box2 {
  background-color: #00cf12;
  grid-column-start: 1; /* grid-column: 1/2; */
  grid-row: 2 / -1; /* grid-row: 2/4; */
}

.box3 {
  background-color: #ff9019;
  grid-column: 2/-1; /* grid-column: 2/4; */
  grid-row-start: 2; /* grid-row: 2/3; */
}

.box4 {
  background-color: #ffd000;
  grid-column-start: 2; /* grid-column: 2/3; */
  grid-row-start: 3; /* grid-row: 3/4; */
}

.box5 {
  background-color: #ff3f3f;
  grid-column: 3 / -1; /* grid-column: 3/4; */
  grid-row: 3 / -1; /* grid-row: 3/4; */
}

템플릿 영역을 사용해 배치하기

• 그리드 라인 시작 번호와 끝 번호를 일일이 지정해서 만드는 것은 불편한 점이 있음.

• 보다 쉽게 그리드 항목을 배치하는 방법.

• grid-area:<영역이름>;

• grid-template-areas 속성에서 원하는 형태로, 생각한 형태로 배치 한다.

  • 큰 따옴표(”) 안에 나열하여 템플릿 영역을 배치한다.

    .container {
    width: 700px;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    gap: 1rem;
    grid-template-areas:
    "box1 box1 box1"
    "box2 box3 box3"
    "box2 box4 box5"
    ;
    }
    
    .box {
    padding: 15px;
    color: #fff;
    text-align: center;
    }
    
    .box1 {
    background-color: #3689ff;
    grid-area: box1;
    }
    
    .box2 {
    background-color: #00cf12;
    grid-area: box2;
    }
    
    .box3 {
    background-color: #ff9019;
    grid-area: box3;
    }
    
    .box4 {
    background-color: #ffd000;
    grid-area: box4;
    }
    
    .box5 {
    background-color: #ff3f3f;
    grid-area: box5;
    }

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 템플릿 영역을 이용해서 하는 게 매우 편리함.
• 웹 페이지 전체 구성을 할 때 이렇게 하면 될 것 같다는 생각이 듬.
• 반응형 웹 구성을 염두에 두고 작업하는 것은 생각보다 쉽진 않음.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/ko/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas

---

🤟소감 3줄 요약

• HTML 과 CSS 역할이 다름을 계속 주지하고 인지해야 할 것 같다.
• 뭔가 작업해야 할 게 있는데, 이게 HTML 에서 할지, CSS 에서 할지 결정할 때,
  딱 정해져야 할 기준을 계속 생각해봐야겠다.
• 벌써 책 절반을 넘어간다. 야호~