CSS Grid는 그리드 레이아웃을 만들기 위한 강력한 도구입니다. 그러나 때로는 아이템의 크기와 위치가 동적으로 변경되어야 하는 경우가 있습니다. 이런 경우에 자바스크립트를 사용하여 아이템의 크기와 위치를 조정할 수 있습니다.

아래는 자바스크립트를 사용하여 CSS Grid 아이템의 크기와 위치를 동적으로 조정하는 예제 코드입니다. 이 코드는 아이템을 클릭했을 때 아이템의 크기와 위치를 변경합니다.

// CSS Grid 아이템 선택하기
const item = document.querySelector('.grid-item');

// 아이템을 클릭했을 때 이벤트 처리
item.addEventListener('click', () => {
  // 아이템의 크기와 위치를 임의로 변경
  item.style.gridRow = 'span 2';  // 세로 크기를 2로 변경
  item.style.gridColumn = 'span 3';  // 가로 크기를 3으로 변경
  item.style.gridArea = '2 / 2 / 4 / 4';  // 위치를 (2,2)에서 (4,4)로 변경
});

위의 코드에서는 자바스크립트의 addEventListener 메서드를 사용하여 아이템에 클릭 이벤트를 바인딩합니다. 클릭 이벤트가 발생하면 아이템의 크기와 위치를 변경하기 위해 아이템의 gridRow, gridColumn, gridArea 속성을 변경합니다.

이 예제 코드는 단순히 클릭했을 때 아이템의 크기와 위치를 변경하는 것을 보여주기 위한 것입니다. 실제로는 여러 가지 상황에 따라 아이템의 크기와 위치를 동적으로 변경할 수 있습니다.

이와 같이 자바스크립트를 사용하여 CSS Grid 아이템의 크기와 위치를 동적으로 조정할 수 있습니다. 이를 통해 더욱 유연하고 동적인 그리드 레이아웃을 구현할 수 있습니다.

#Javascript #CSSGrid