CSS Grid와 Flexbox는 웹 개발에서 레이아웃을 조정하는 강력한 도구입니다. 그러나 때로는 이 둘을 함께 사용하여 더 복잡한 레이아웃을 구현해야 할 때가 있습니다. 이번 글에서는 자바스크립트를 활용하여 CSS Grid와 Flexbox를 결합하여 복합적인 레이아웃 조정 기능을 구현하는 방법에 대해 알아보겠습니다.

CSS Grid와 Flexbox의 기본 개념 복습하기

CSS Grid는 행과 열의 그리드로 구성된 레이아웃 시스템입니다. grid-template-rows와 grid-template-columns 속성을 사용하여 그리드의 구성을 정의할 수 있으며, 그리드 아이템들을 배치하는데 유연한 방식을 제공합니다.

Flexbox는 단일 행 또는 열 안에서 아이템을 정렬하는 레이아웃 시스템입니다. display: flex와 함께 사용되며, justify-content와 align-items 등의 속성을 사용하여 아이템의 정렬 방향과 간격을 조정할 수 있습니다.

CSS Grid와 Flexbox의 결합

CSS Grid와 Flexbox는 각각 강력한 기능을 가지고 있지만, 때로는 그리드 내의 아이템들을 유동적으로 배치하고 조정해야 할 때가 있습니다. 이럴 때는 CSS Grid 내에 Flexbox를 사용하여 아이템의 정렬과 간격을 조정할 수 있습니다.

아래는 CSS Grid와 Flexbox를 결합하여 복합적인 레이아웃을 구현하는 예제입니다:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  padding: 20px;
}

/* 자바스크립트를 활용하여 레이아웃 조정하기 */
const gridItems = document.querySelectorAll('.grid-item');

gridItems.forEach(item => {
  const randomHeight = Math.floor(Math.random() * 300) + 100;
  item.style.height = `${randomHeight}px`;
});

위의 예제 코드에서는 .grid-container가 CSS Grid로 설정되어 있고, .grid-item은 Flexbox를 사용하여 아이템을 정렬하고 있습니다. 자바스크립트를 사용하여 .grid-item의 높이를 무작위로 설정하였습니다. 이를 통해 그리드 내의 아이템들이 유동적으로 배치되는 레이아웃을 구현할 수 있습니다.

마무리

CSS Grid와 Flexbox를 결합하여 복합적인 레이아웃을 구현하는 방법에 대해 알아보았습니다. 이를 활용하면 웹 페이지의 다양한 레이아웃을 보다 쉽게 조정할 수 있습니다. CSS Grid와 Flexbox의 다양한 속성과 기능을 탐구하고 실험하여 원하는 레이아웃을 구현해보세요!

#CSS #Grid #Flexbox