20 Grid
Grid TOC๋ง ํ๊ธฐ.
Grid Properties
Grid Container Properties
์์ฑ | ์๋ฏธ |
display | ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋(Container)๋ฅผ ์ ์ |
grid-template-rows | ๋ช ์์ ํ(Track)์ ํฌ๊ธฐ๋ฅผ ์ ์ |
grid-template-columns | ๋ช ์์ ์ด(Track)์ ํฌ๊ธฐ๋ฅผ ์ ์ |
grid-template-areas | ์์ญ(Area) ์ด๋ฆ์ ์ฐธ์กฐํด ํ ํ๋ฆฟ ์์ฑ |
grid-template | grid-template-xxx์ ๋จ์ถ ์์ฑ |
row-gap(grid-row-gap) | ํ๊ณผ ํ ์ฌ์ด์ ๊ฐ๊ฒฉ(Line)์ ์ ์ |
column-gap(grid-column-gap) | ์ด๊ณผ ์ด ์ฌ์ด์ ๊ฐ๊ฒฉ(Line)์ ์ ์ |
gap(grid-gap) | xxx-gap์ ๋จ์ถ ์์ฑ |
grid-auto-rows | ์์์ ์ธ ํ(Track)์ ํฌ๊ธฐ๋ฅผ ์ ์ |
grid-auto-columns | ์์์ ์ธ ์ด(Track)์ ํฌ๊ธฐ๋ฅผ ์ ์ |
grid-auto-flow | ์๋ ๋ฐฐ์น ์๊ณ ๋ฆฌ์ฆ ๋ฐฉ์์ ์ ์ |
grid | grid-template-xxx๊ณผ grid-auto-xxx์ ๋จ์ถ ์์ฑ |
align-content | ๊ทธ๋ฆฌ๋ ์ฝํ ์ธ (Grid Contents)๋ฅผ ์์ง(์ด ์ถ) ์ ๋ ฌ |
justify-content | ๊ทธ๋ฆฌ๋ ์ฝํ ์ธ ๋ฅผ ์ํ(ํ ์ถ) ์ ๋ ฌ |
place-content | align-content์ justify-content์ ๋จ์ถ ์์ฑ |
align-items | ๊ทธ๋ฆฌ๋ ์์ดํ (Items)๋ค์ ์์ง(์ด ์ถ) ์ ๋ ฌ |
justify-items | ๊ทธ๋ฆฌ๋ ์์ดํ ๋ค์ ์ํ(ํ ์ถ) ์ ๋ ฌ |
place-items | align-items์ justify-items์ ๋จ์ถ ์์ฑ |
Grid Item Properties
์์ฑ | ์๋ฏธ | |
grid-row-start | ๊ทธ๋ฆฌ๋ ์์ดํ (Item)์ ํ ์์ ์์น ์ง์ | |
grid-row-end | ๊ทธ๋ฆฌ๋ ์์ดํ ์ ํ ๋ ์์น ์ง์ | |
grid-row | grid-row-xxx์ ๋จ์ถ ์์ฑ(ํ ์์/๋ ์์น) | |
grid-column-start | ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ด ์์ ์์น ์ง์ | |
grid-column-end | ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ด ๋ ์์น ์ง์ | |
grid-column | grid-column-xxx์ ๋จ์ถ ์์ฑ(์ด ์์/๋ ์์น) | |
grid-area | ์์ญ(Area) ์ด๋ฆ์ ์ค์ ํ๊ฑฐ๋, grid-row์ | grid-column์ ๋จ์ถ ์์ฑ |
align-self | ๋จ์ผ ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์์ง(์ด ์ถ) ์ ๋ ฌ | |
justify-self | ๋จ์ผ ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ํ(ํ ์ถ) ์ ๋ ฌ | |
place-self | align-self์ justify-self์ ๋จ์ถ ์์ฑ | |
order | ๊ทธ๋ฆฌ๋ ์์ดํ ์ ๋ฐฐ์น ์์๋ฅผ ์ง์ | |
z-index | ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์์ด๋ ์์๋ฅผ ์ง์ |
Last updated