우리가 grid-template-rows에 설정한 행의 수 보다 많은 element들이 화면에 보이게 된다면
우리가 설정한 크기와 같지않는 cell들이 발생한다.
아래의 코드를 보면 4X4의 그리드를 만들었지만
element가 31개이기에 16번째까지는 우리가 설정한 grid에 들어가고
17번째 element부터는 우리가 설정한 100px X 100px 의 크기를 가지지 못한다.
이를 해결하기 위해서는 grid-auto-rows를 사용하면 된다.
grid-auto-rows의 크기를 설정해놓으면
만들어놓은 row 보다 많은 element가 있으면 자동으로 설정한 크기에 맞는 row를 만들어준다.
grid-auto-rows의 경우 다음 row에 요소들이 배치가 되는데
그 이유는 grid-auto-flow가 row로 설정되어있기때문이다.
만약 다음 row가 아닌 column을 추가하고 싶다면 grid-auto-flow:column ; 을 추가한 뒤
grid-auto-cloumns의 크기를 설정해주면된다.
'CSS' 카테고리의 다른 글
| [ CSS ] 텍스트 줄이기 (0) | 2024.08.19 |
|---|---|
| [ CSS ] input[type="date"] 커스텀하기 + :valid 작동 안하는 문제해결 (0) | 2023.06.22 |
| [ CSS ] SCSS - variables, nesting, mixins, extends (0) | 2023.04.15 |
| [ CSS ] Grid 행과 열 개수 설정 - auto-fill, auto-fit / minmax 활용 (0) | 2023.04.07 |
| [ CSS ] min-content, max-content (0) | 2023.04.07 |