CSS Grid는 웹 디자인에서 효율적인 레이아웃 시스템을 구축하기 위해 사용되는 강력한 도구입니다. 그러나 Grid 시스템을 사용하면 유연한 동적 레이아웃을 만들기는 쉽지만, 그 자체로는 복잡한 동작을 구현하기 어렵습니다. 여기서 자바스크립트(Javascript)를 활용하여 CSS Grid 시스템을 구축하는 방법에 대해 알아보겠습니다.

1. 그리드 아이템 동적 배치하기

CSS Grid의 가장 큰 장점 중 하나는 그리드 아이템의 배치를 자유롭게 조정할 수 있다는 것입니다. 이를 위해 자바스크립트를 사용하여 그리드 아이템을 동적으로 배치할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 그리드 아이템의 위치를 변경하도록 할 수 있습니다.

const gridItem = document.querySelector('.grid-item');
const button = document.querySelector('.button');

button.addEventListener('click', () => {
  // 랜덤한 위치로 그리드 아이템 이동
  const x = Math.floor(Math.random() * 3) + 1;
  const y = Math.floor(Math.random() * 3) + 1;
  gridItem.style.gridColumn = `span ${x}`;
  gridItem.style.gridRow = `span ${y}`;
});

위의 예제는 버튼을 클릭할 때마다 그리드 아이템의 위치를 랜덤하게 변경하는 코드입니다. gridColumn과 gridRow 속성을 사용하여 그리드 아이템의 크기와 위치를 설정합니다.

2. 반응형 그리드 디자인

자바스크립트를 사용하여 웹 페이지가 다양한 디바이스와 화면 크기에 대응할 수 있도록 그리드 시스템을 반응형으로 만들 수도 있습니다. 이를 위해 window.resize 이벤트를 사용하여 화면 크기가 변경될 때마다 그리드 아이템의 크기와 위치를 조정하는 코드를 작성할 수 있습니다.

window.addEventListener('resize', () => {
  // 화면 크기가 변경될 때마다 그리드 크기 조정
  const gridContainer = document.querySelector('.grid-container');
  const gridItemSize = calculateGridItemSize();
  gridContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${gridItemSize}px, 1fr))`;
  gridContainer.style.gridTemplateRows = `repeat(auto-fit, minmax(${gridItemSize}px, 1fr))`;
});

function calculateGridItemSize() {
  const containerWidth = document.querySelector('.grid-container').offsetWidth;
  const columnCount = Math.floor(containerWidth / 200);
  return containerWidth / columnCount;
}

위의 예제는 화면 크기가 변경될 때마다 그리드 아이템의 크기와 위치를 조정하는 코드입니다. calculateGridItemSize 함수를 사용하여 그리드 컨테이너의 폭을 기반으로 그리드 아이템의 크기를 계산합니다. 그리고 gridTemplateColumns와 gridTemplateRows 속성을 사용하여 그리드 크기를 설정합니다.

마치며

이렇게 자바스크립트를 사용하여 CSS Grid 시스템을 구축할 수 있습니다. 그리드 아이템의 동적 배치와 반응형 그리드 디자인을 구현함으로써 더욱 유연하고 다양한 레이아웃을 만들 수 있습니다. 이러한 방법을 활용하여 웹 디자인의 자유도를 더욱 높일 수 있습니다.

#자바스크립트 #CSSGrid