Auto column, row

그리드 형태를 자동으로 정의
: grid-auto-columns
: grid-auto-rows

grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성

grid-auto-colums

.container {
	display: grid; 
	grid-template-columns: repeat(2, 30px); 
	grid-template-rows:repeat(2, 30px); 
	grid-auto-flow:column; 
	grid-auto-columns:100px; 
	gap: 3px;
}

1

2

3

4

5

6

7

8

9

 

grid-auto-rows

.container {
	display: grid; 
	grid-template-columns: repeat(2, 30px); 
	grid-template-rows:repeat(2, 30px); 
	grid-auto-rows:100px; 
	gap: 3px;
}

 

1

2

3

4

5

6

7

8

9

 

자동배치

: grid-auto-flow

.container {
	grid-auto-flow: row;
	grid-auto-flow: column;
	grid-auto-flow: dense;
	grid-auto-flow: row dense;
	grid-auto-flow: column dense;
}

1️⃣ row

A

B

C

D

E

F

G

H

I

 

2️⃣ column

A

B

C

D

E

F

G

H

I

 

3️⃣ dense

A

B

C

D

E

F

G

H

I

 

4️⃣ row dense

A

B

C

D

E

F

G

H

I

 

5️⃣ column dense

A

B

C

D

E

F

G

H

I