반응형 Grid?

CSS Grid 에서 특히 ex) grid-template-columns: auto-fit, minmax(); 와 같은 코드를 사용한 반응형 그리드에서는 화면의 크기가 바뀔때에 column (열)과 row (행)의 수도 바뀌게 됩니다.

그렇다면 리사이징 된 화면에서 반응형 그리드의 column (열)혹은 row (행)의 갯수를 구하려면 어떻게 해야 할까요?

Javascript를 사용하여 row(행), column(열) 개수 구하기

반응형 그리드의 행 혹은 열의 수를 얻기 위해 가장 먼저 해야되는 것은

1. window.getComputedStyle 을 사용하여 그리드 요소에 대한 스타일 정보를 가져옵니다. 이 부분을 원하는 그리드 요소로 변경해야 합니다.

ex) 이 예제에서는 class가 '.grid-container'인 요소를 선택했다고 가정합니다.
const gridElement = document.querySelector('.grid-container');

그리드 요소에 대한 스타일 정보를 가져옵니다.
const gridStyles = window.getComputedStyle(gridElement);

2. getPropertyValue 메서드를 사용하여 'grid-template-columns' 속성의 값을 가져옵니다. 이 속성은 그리드의 열에 대한 정의를 포함합니다.

const gridColumnValue = gridStyles.getPropertyValue('grid-template-columns');

여기서 console.log 를 확인해보면 각 그리드의 column 갯수에 따른 width의 픽셀 값이 나오는 것을 확인할수 있습니다.

3. 마지막으로 grid-template-columns 값을 가져온 후, 스페이스로 구분된 값들을 배열로 분할하여 열의 개수를 확인합니다.

const gridColumnCount = gridColumnValue.split(" ").length;
console.log(gridColumnCount); //그리드의 열 개수 콘솔에 출력

위와 같이 'gridColumnCount' 변수에 그리드의 열 개수가 저장되며, 이 값을 콘솔에 출력할 수 있습니다 :)