Place Items

세로 방향 

: align-items

.container {
	align-items: stretch; /*default*/
	align-items: start;
	align-items: center;
	align-items: end;
}

1️⃣ stretch

A

B

C

D

E

F

G

H

I

 

2️⃣ start

A

B

C

D

E

F

G

H

I

3️⃣ center

A

B

C

D

E

F

G

H

I

4️⃣ end

A

B

C

D

E

F

G

H

I

 

가로 방향

: justify-items

.container {
	justify-items: stretch; /*default*/
	justify-items: start;
	justify-items: center; 
	justify-items: end; 
}

1️⃣ stretch

A

B

C

D

E

F

G

H

I

2️⃣ start

A

B

C

D

E

F

G

H

I

3️⃣ center

A

B

C

D

E

F

G

H

I

4️⃣ end

A

B

C

D

E

F

G

H

I

 

align-items + justify-items

: place-items

.container {
	place-items: align-items justify-items;
}