grid-template-columns
:size
size
size
...grid-template-rows
:size
size
size
...
grid-template의 속성에 영향을 받지 않는 item들에 대한 template
grid-auto-columns
:size
size
size
...grid-auto-rows
:size
size
size
...
grid-template-areas
:
"header header header"
"leftbar main rightbar"
". . ."
"footer footer footer"Grid Item에 grid-area 속성으로 이름 지정해주기
row-gap
:size
column-gap
:size
gap
:row-gap
column-gap
- align-items: [
stretch
|start
|center
|end
]- justify-items: [
stretch
|start
|center
|end
]- place-items:
align-items
justify-items
align-content
: [stretch
|start
|center
|end
|space-between
|space-around
|space-evenly
]justify-content
: [stretch
|start
|center
|end
|space-between
|space-around
|space-evenly
]place-content
:align-content
justify-content
grid-area
:이름
그리드의 이름 지정
grid-column
:grid-column-start
/grid-column-end
grid-row
:grid-row-start
/grid-row-end
1 / span 2
하면 1부터 2칸까지!
align-self
: [stretch
|start
|center
|end
]justify-self
: [stretch
|start
|center
|end
]place-self
:align-self
justify-self