[CSS Grid] grid-auto

grid-auto-rows

높이값을 주지 않고, 그리드를 만들었는데 담기는 내용들이 템플릿의 columns 나 rows 보다 많다면, 아래와 같은 문제가 발생함.

body {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 5px;
}

.item {
  color: white;
  background-color: blueviolet;
}

.item:nth-child(odd) {
  background-color: skyblue;
}

 

 

 

그리드 템플릿에서 정해준 row 는 잘 작동하지만, 17번부터 50번까지는 깨짐. 이런 경우 grid-auto-rows 를 사용.

body {
  ...
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
  ...
}

# 또는

body {
  ...
  grid-auto-rows: 100px;
  ...
}

 

 

 

 

 

---

grid-auto-flow

만약 이 상태에서 grid-auto-flow 를 주면, row 가 생기는 것이 아니라 17번부터 column 으로 만들어짐. 즉 row 는 4개로 고정됨.

 

 

 

 

 

 

 

 

 

 

 

 

body {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: column;
  gap: 5px;
}

.item {
  color: white;
  background-color: blueviolet;
}

.item:nth-child(odd) {
  background-color: skyblue;
}

이때 주의할 점은 cell 의 순서가 변경된다는 것. 마치 flex-direction 과 같음.  

 

---

grid-auto-columns

다음으로 grid-auto-column 에 값을 주면, 다음과 같이 정렬이 됨.

body {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 100px;
  gap: 5px;
}

.item {
  color: white;
  background-color: blueviolet;
}

.item:nth-child(odd) {
  background-color: skyblue;
}