초코의 풀스택 도전기 9: CSS Grid로 복잡한 레이아웃을 쉽게 만들기

도입

박스 모델과 Flexbox에 대해 배우고 난 후, 초코는 조금 더 복잡한 레이아웃을 어떻게 만들 수 있을지 고민했다.

 

"멘토님, Flexbox로 요소들을 쉽게 배치할 수 있다는 건 알았어요. 그런데 웹사이트 전체를 만들 때, 가로와 세로 방향 모두에서 좀 더 복잡한 구조를 만들고 싶을 땐 어떻게 해야 하죠?"

 

멘토는 미소를 지으며 고개를 끄덕였다.
"좋은 질문이야, 초코야. Flexbox는 1차원 레이아웃 도구로 주로 가로 또는 세로 한 방향에서만 요소를 배치할 수 있어. 하지만 더 복잡한 2차원 레이아웃이 필요할 때는 CSS Grid가 더 효율적이야. Grid는 가로와 세로 모두를 다루는 강력한 도구거든."

 

1. CSS Grid의 기본 개념

멘토는 설명을 시작했다.

 

"CSS Grid는 행(Row)과 열(Column)을 설정해 2차원 레이아웃을 만들 수 있어. 부모 요소를 Grid Container로 설정하고, 자식 요소들이 Grid Item이 되는 방식이지."

 

초코는 열심히 필기하며 물었다.
"그럼, 어떻게 행과 열을 설정하죠?"

 

멘토는 코드를 보여주며 설명했다.

<style>
  .grid-container {
    display: grid; /* Grid 레이아웃 활성화 */
    grid-template-columns: 1fr 1fr 1fr; /* 3개의 열을 동일한 비율로 생성 */
    grid-template-rows: auto auto; /* 자동 크기로 설정된 두 개의 행 */
    gap: 10px; /* 각 셀 사이의 간격 */
  }
  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
    font-size: 18px;
  }
</style>

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

 

"여기서 .grid-container는 grid 레이아웃을 활성화하고, grid-template-columns로 3개의 열을 만들었어. 1fr은 열의 크기를 균등하게 나누는 단위야. 그리고 gap 속성을 통해 각 셀 사이의 간격을 설정했지."

 

초코는 결과를 확인하고 고개를 끄덕였다.
"오, 이제 열과 행을 자유롭게 설정하면서 배치할 수 있겠군요!"

 

2. Grid의 강력한 레이아웃 기능

초코는 더 복잡한 레이아웃을 만들 수 있는 방법을 궁금해하며 물었다.
"그럼, 각 요소가 여러 셀을 차지하거나 특정 위치에 배치되도록 하는 것도 가능할까요?"

 

멘토는 웃으며 대답했다.
"당연하지! Grid의 강력한 기능 중 하나가 바로 요소를 여러 셀에 걸쳐서 배치할 수 있다는 점이야."

 

멘토는 새로운 코드를 보여주었다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 첫 번째와 세 번째 열은 동일, 가운데는 2배 크기 */
    grid-template-rows: auto;
    gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
    font-size: 18px;
  }
  .grid-item-1 {
    grid-column: 1 / 3; /* 첫 번째에서 두 번째 열까지 차지 */
  }
  .grid-item-2 {
    grid-column: 2 / 4; /* 두 번째에서 세 번째 열까지 차지 */
  }
</style>

<div class="grid-container">
  <div class="grid-item grid-item-1">1번: 두 열 차지</div>
  <div class="grid-item grid-item-2">2번: 두 열 차지</div>
  <div class="grid-item">3번</div>
</div>

 

"이 코드에서 grid-column 속성을 사용해 1번 요소가 첫 번째와 두 번째 열을 차지하도록 했고, 2번 요소는 두 번째와 세 번째 열을 차지하도록 했어. 이렇게 Grid는 더 복잡한 레이아웃도 쉽게 구성할 수 있어." 

 

초코는 눈을 크게 뜨며 감탄했다.
"정말 강력하네요! 복잡한 레이아웃도 이렇게 간단하게 구현할 수 있군요."

 

3. Flexbox와 Grid의 차이점

초코는 Flexbox와 Grid가 어떻게 다른지 궁금해졌다.

 

"멘토님, Flexbox도 레이아웃을 만드는 데 도움이 되잖아요. 그런데 Grid와는 어떤 차이가 있나요?"

 

멘토는 두 도구의 차이점을 코드와 함께 설명하기로 했다.

 

"좋은 질문이야, 초코야. Flexbox는 1차원 레이아웃 도구로, 주로 한 방향(가로 또는 세로)으로 요소를 배치해. 반면, Grid는 2차원 레이아웃 도구라서 가로와 세로를 동시에 다룰 수 있지. 그래서 더 복잡한 레이아웃을 설계할 때는 Grid가 더 적합해."

 

멘토는 간단한 Flexbox와 Grid의 예시를 비교해서 보여주었다.

Flexbox 예시

<style>
  .flex-container {
    display: flex;
    justify-content: space-around; /* 요소들을 가로로 균등하게 배치 */
  }
  .flex-item {
    background-color: lightblue;
    padding: 20px;
    width: 100px; /* 요소의 너비를 고정 */
    text-align: center; /* 텍스트 가운데 정렬 */
  }
</style>

<div class="flex-container">
  <div class="flex-item">Flex 1</div>
  <div class="flex-item">Flex 2</div>
  <div class="flex-item">Flex 3</div>
</div>

Flexbox 설명:

• display: flex;는 Flexbox 레이아웃을 활성화하고, justify-content: space-around;는 요소들을 가로로 균등하게 배치.
• 요소는 가로 방향에서만 배치되며, 세로 방향으로는 별도의 정렬이 필요 없음.

이 결과는 모든 요소들이 한 줄에 가로로 나란히 배치된다는 점에서 1차원적입니다.

Grid 예시

<style>
  .grid-container {
    display: grid; /* Grid 레이아웃 활성화 */
    grid-template-columns: 1fr 1fr 1fr; /* 3개의 열을 동일한 비율로 생성 */
    gap: 10px; /* 셀 사이의 간격 */
  }
  .grid-item {
    background-color: lightgreen;
    padding: 20px;
    text-align: center; /* 텍스트 가운데 정렬 */
  }
</style>

<div class="grid-container">
  <div class="grid-item">Grid 1</div>
  <div class="grid-item">Grid 2</div>
  <div class="grid-item">Grid 3</div>
  <div class="grid-item">Grid 4</div>
  <div class="grid-item">Grid 5</div>
  <div class="grid-item">Grid 6</div>
</div>

Grid 설명:

• display: grid;는 Grid 레이아웃을 활성화.
• grid-template-columns: 1fr 1fr 1fr;는 3개의 열을 균등하게 나누어 가로와 세로 모두에 요소를 배치할 수 있음.
• 각 셀은 Grid의 가로와 세로에 걸쳐 배치되며, 이 점이 Flexbox와의 차이점임.

이 결과는 요소들이 가로와 세로 모두에서 배치되어, 보다 복잡한 레이아웃을 가능하게 만듭니다.

 

Flexbox와 Grid 비교

멘토는 두 예시를 보여주며 설명을 이어갔다.

 

"Flexbox는 가로 방향으로만 요소를 배치하는 반면, Grid는 가로와 세로를 동시에 배치할 수 있어. 그래서 Flexbox는 단순한 1차원 레이아웃에 적합하고, Grid는 2차원 레이아웃을 설계하는 데 적합하지."

 

초코는 두 도구의 차이점을 직관적으로 이해할 수 있었다.
"이제 언제 Flexbox를 사용하고, 언제 Grid를 사용해야 하는지 확실히 알겠어요! 간단한 레이아웃은 Flexbox로, 더 복잡한 구조는 Grid로 만들면 되겠군요."

 

결론

초코는 CSS Grid를 통해 더 복잡하고 유연한 레이아웃을 만드는 방법을 배웠다.

 

"Grid 덕분에 이제 가로와 세로 모두를 조정해서 웹페이지 레이아웃을 더 자유롭게 설계할 수 있겠어요."

 

멘토는 미소 지으며 말했다. "맞아, Flexbox와 Grid는 CSS 레이아웃을 다루는 데 필수적인 도구들이야. 이 두 가지를 잘 활용하면 어떤 웹페이지든 멋지게 설계할 수 있어."