[CSS] Grid 정리하기 (Flex 원툴 끝내기)

학습자료 : https://www.youtube.com/watch?v=nxi1EXmPHRs

Flex vs Grid: 2차원 레이아웃의 강력한 선택지

• Flex
  • 1차원 레이아웃에 최적화되어 아이템들을 가로 또는 세로 방향으로 배치하는 데 유용함.
  • wrap 속성으로 다단 레이아웃을 어느 정도 구현 가능하지만, Grid에 비해 2차원적인 제어는 제한적임.
• Grid
  • 2차원 레이아웃을 위한 강력한 도구.
  • 행과 열을 정의하여 아이템들을 격자 형태로 자유롭게 배치 가능함.
  • Flex보다 복잡하고 정교한 레이아웃 디자인에 유리

아이템의 주된 배치 방향이 명확하다면 Flex,
복잡한 2차원 구조나 정밀한 배치가 필요하다면 Grid를 선택하는 것이 효율적.
필요에 따라 혼합하여 사용하는 것도 좋은 전략임.

Grid 기본 사용법

• Grid 컨테이너 정의

  • 부모 요소에 display: grid;를 적용하여 Grid 컨테이너로 만듦.
  • 자식 요소들은 자동으로 Grid 아이템(Grid Cell)이 됨.

• Grid 컨테이너 주요 속성:

  • grid-template-columns: 열의 개수와 너비를 정의함.
    • grid-template-columns: 100px 100px 100px; (3개의 고정 너비 열)
    • grid-template-columns: repeat(5, 100px); (100px 너비의 5개 열 반복)
    • grid-template-columns: repeat(5, 20%); (사용 가능한 너비의 20%씩 5개 열)
    • grid-template-columns: 1fr 1fr 1fr; (사용 가능한 너비를 동일 비율로 나눈 3개 열, fr은 fractional unit)
    • grid-template-rows: 행의 개수와 높이를 정의함. 사용법은 grid-template-columns와 유사함.
    • grid-template-rows: 100px 200px repeat(2, 200px);
  • grid-auto-rows: 명시적으로 정의되지 않은 행의 높이를 설정함.
    • grid-auto-rows: 150px; (암시적 행의 높이를 150px로 고정)
    • grid-auto-rows: minmax(150px, auto); (최소 높이는 150px, 내용에 따라 자동 확장)
    • grid-template-areas: 명명된 Grid 영역을 정의하여 레이아웃을 시각적으로 구성함.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    grid-template-areas:
        'header header header'
        'sidebar main main'
        'footer footer footer';
}

• grid-gap: Grid 셀 사이의 간격을 설정함.
  • grid-gap: 10px; (행과 열 사이 간격 모두 10px)
  • grid-column-gap: 10px; (열 사이 간격)
  • grid-row-gap: 10px; (행 사이 간격)

Grid 아이템 (자식 요소) 속성:

• grid-column-start, grid-column-end
  • 아이템이 차지하는 열의 시작과 끝 선 번호를 지정함 (1부터 시작).
• grid-row-start, grid-row-end
  • 아이템이 차지하는 행의 시작과 끝 선 번호를 지정함 (1부터 시작).
• grid-column
  • grid-column-start와 grid-column-end의 단축 속성.
    • grid-column: 2 / 4; (2번 열 시작, 4번 열 이전까지 차지)
    • grid-column: 2 / span 2; (2번 열 시작, 2개 열 차지)
    • grid-column: 2 / -1; (2번 열 시작, 마지막 열까지 차지)
• grid-row
  • grid-row-start와 grid-row-end의 단축 속성. 사용법은 grid-column과 동일함.
• grid-area
  • 아이템이 배치될 명명된 Grid 영역을 지정하거나, grid-row-start, grid-column-start, grid-row-end, grid-column-end 값을 순서대로 지정하는 단축 속성임.
    • grid-area: header; (.container의 grid-template-areas에 정의된 'header' 영역에 배치)
    • grid-area: 1 / 2 / 3 / 4; (1행 2열 시작, 3행 4열 이전까지 차지)

예시

<div class="container">
    <img src="image1.jpg" alt="Image 1" class="image image1">
    <img src="image2.jpg" alt="Image 2" class="image image2">
    <img src="image3.jpg" alt="Image 3" class="image image3">
    <img src="image4.jpg" alt="Image 4" class="image image4">
    <img src="image5.jpg" alt="Image 5" class="image image5">
    <img src="image6.jpg" alt="Image 6" class="image image6">
    <img src="image7.jpg" alt="Image 7" class="image image7">
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 동일 너비 열 */
    grid-auto-rows: 150px; /* 암시적 행의 기본 높이 */
    grid-gap: 1rem; /* 셀 사이 간격 */
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 비율 유지하며 채우기 */
}

/* grid-area를 사용하여 특정 영역에 배치 */
.container {
    grid-template-areas:
        'a a a'
        'b c c'
        'b d g'
        'e f g';
}

.image1 { grid-area: a; }
.image2 { grid-area: b; }
.image3 { grid-area: c; }
.image4 { grid-area: d; }
.image5 { grid-area: e; }
.image6 { grid-area: f; }
.image7 { grid-area: g; } 

이처럼 Grid는 복잡한 레이아웃을 직관적이고 효율적으로 구현할 수 있도록 다양한 기능을 제공함. Flex와의 차이를 이해하고 적절한 상황에 맞게 활용하는 것이 중요함.