동적 데이터 grid 처리하기: grid-auto-columns / grid-auto-flow

 

📌 grid-auto-columns/rows

: 컨텐츠가 추가되면 자동으로 사이즈에 맞춰 추가하는 속성

• 행/열의 갯수는 컨텐츠 갯수만큼 자동으로 생성
• grid container에 행이 추가로 생기는 상황이 오면, 자동으로 사이즈에 맞춰 추가해준다.
• 동적 데이터를 다룰 때 유용

 

• grid-auto-rows: 1fr;

 

 

• grid-auto-columns: 1fr;

 

 

---

 

📌 grid-auto-flow

: 새로 추가되는 요소의 자동 배치 방향 설정

• row: 열(세로)로 배치
  - 기본값
• column: 행(가로)로 배치
• dense: 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치

 

 

• 1, 2번째 div까지는 repeat(2, 1fr)가 적용
  3번째 div부터는 grid-auto-columns: 2fr가 적용됨

.father {
    /* 미리 준비한 개수의 사이즈 */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    /* 추가된 개수의 사이즈 처리 */
    grid-auto-columns: 2fr;

    /* 추가되는 컨텐츠 배치 방향 */
    grid-auto-flow: column;
}

 

 

---

 

 

출처

노마드코더 CSS Layout 마스터클래스