[CSS] html 조건 요소 자동배치(grid-auto-flow)

 

 

 

 

 

 

 

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

 

아래의 코드를 주게 되면, 추가되는 html 요소에 대해서 한 줄에 옆으로만 요소를 추가하게 됩니다.

요소가 추가되는 부모 요소의 크기는 고정되고 자식 요소들의 크기가 줄어들면서 요소들이 추가되게 됩니다.

grid-template-column  속성 없이, 아래 코드 속성만 줘도 작동합니다.

grid-auto-flow: column;

1개 요소만 있을 경우.

 

2번째 요소가 채워졌을 경우.