5. Grid
Grid ์ ๋ํด์ ์์๋ณด์
๊ทธ๋ฆฌ๋์ ๊ฐ๋ ์ ์ดํ๋ณด๊ธฐ ์ ์ ์์์ผ ํ ๋ช ๊ฐ์ง ์ฉ์ด๊ฐ ์๋ค.
Grid Container
๊ทธ๋ฆฌ๋๊ฐ ์ ์ฉ๋๋ ์์์ด๋ค.
๋ชจ๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์ง์ ์ ์ธ ๋ถ๋ชจ์ด๋ค.
์ด ์์ ์์ ์ปจํ ์ด๋๋ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ด๋ค.
Grid Item
๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ์์(์ฆ, ์ง๊ณ ์์)์ด๋ค.
์ฌ๊ธฐ์ ํญ๋ชฉ ์์๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ด์ง๋ง ํ์ ํญ๋ชฉ์ ๊ทธ๋ ์ง ์๋ค.
Grid line
๊ฒฉ์์ ๊ตฌ์กฐ๋ฅผ ๊ตฌ์ฑํ๋ ๊ตฌ๋ถ์
Grid Cell
์ธ์ ํ ๋ ํ๊ณผ ์ธ์ ํ ๋ ์ด ๊ฒฉ์์ ์ฌ์ด์ ๊ณต๊ฐ
Grid Track
์ธ์ ํ ๋ ๊ทธ๋ฆฌ๋ ์ ์ฌ์ด์ ๊ณต๊ฐ.
๊ทธ๋ฆฌ๋์ ์ด ๋๋ ํ์ผ๋ก ์๊ฐํ ์ ์ด๋ค.
๋ค์์ ๋ ๋ฒ์งธ ํ๊ณผ ์ธ ๋ฒ์งธ ํ ๊ทธ๋ฆฌ๋ ์ ์ฌ์ด์ ๊ทธ๋ฆฌ๋ ํธ๋์ด๋ค.
Grid Area
4๊ฐ์ ๊ฒฉ์ ์ ์ผ๋ก ๋๋ฌ์ธ์ธ ์ ์ฒด ๊ณต๊ฐ์ด๋ค.
๊ทธ๋ฆฌ๋ ์์ญ์ ๊ทธ๋ฆฌ๋ ์ ์ ์์ ๊ด๊ณ์์ด ๊ตฌ์ฑํ ์ ์๋ค.
๋ค์์ ํ ๊ทธ๋ฆฌ๋ ๋ผ์ธ 1๊ณผ 3, ์ด ๊ทธ๋ฆฌ๋ ๋ผ์ธ 1๊ณผ 3 ์ฌ์ด์ ๊ทธ๋ฆฌ๋ ์์ญ์ด๋ค.
๊ทธ๋ฆฌ๋ ์ปจํ
์ด๋์์ ์ฌ์ฉํ๋ CSS ํ๋กํผํฐ
display
grid-template-columns, grid-template-rows
๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถ๋ ๊ฐ ๋ชฉ๋ก์ผ๋ก ๊ทธ๋ฆฌ๋์ ์ด๊ณผ ํ์ ์ ์ํ๋ค.
๊ฐ์ ํธ๋ ํฌ๊ธฐ๋ฅผ ๋ํ๋ด๋ฉฐ, ๊ฐ ์ฌ์ด์ ๊ณต๋ฐฑ์ ๊ทธ๋ฆฌ๋ ์ ์ ๋ํ๋ธ๋ค.
๊ทธ๋ฆฌ๋ ์ ์๋ ์์๊ฐ ์๋์ผ๋ก ํ ๋น๋๋ฉฐ, ๋งจ ๋ง์ง๋ง ํ์ ๊ฒฝ์ฐ -1์ด ๋์ฒด๋๋ค.
grid-template-areas
๊ทธ๋ฆฌ๋ ์์ญ ์์ฑ์ผ๋ก ์ง์ ๋ ๊ทธ๋ฆฌ๋ ์์ญ์ ์ด๋ฆ์ ์ฐธ์กฐํ์ฌ ๊ทธ๋ฆฌ๋ ํ ํ๋ฆฟ์ ์ ์ํ๋ค.
๊ทธ๋ฆฌ๋ ์์ญ์ ์ด๋ฆ์ ๋ฐ๋ณตํ๋ฉด ์ฝํ ์ธ ๊ฐ ํด๋น ์ ์ ๊ฑธ์ณ ํ์๋๋ค.
๋ง์นจํ๋ ๋น ์ ์ ๋ํ๋ ๋๋ค.
๊ตฌ๋ฌธ ์์ฒด๋ ๊ทธ๋ฆฌ๋ ๊ตฌ์กฐ์ ์๊ฐํ๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋ช ์ํ ์ด๋ฆ์ผ๋ก item ์ ๋งค์นญ์ํจ๋ค.
grid-template
grid-template-rows, grid-template-column ๋ฅผ ํ๋ฒ์ ์ ์ธํ๋ค.
์ด ์์ฑ์ grid-auto-columns, grid-auto-rows, and grid-auto-flow ์ ์ฌ์ค์ ํ์ง ์์์ผ๋ก grid ์์ฑ์ ์ฐ๊ธฐ๋ฅผ ๊ถ์ฅํ๋ค.
column-gap, row-gap, grid-column-gap, grid-row-gap
grid-column-gap, grid-row-gap ์ ์์ ์ ์ฌ์ฉ๋๋ ํ๋กํผํฐ์ด๋ค.
column-gap, row-gap ์ฌ์ฉ์ ๊ถ์ฅํ๋ค.
gap, grid-gap
row-gap ๊ณผ column-gap ์ ํ๋ฒ์ ์ ์ธํ๋ค.
row-gap ์ด ์ง์ ๋์ง ์๋๋ค๋ฉด, column-gap ๊ณผ ๋์ผํ ๊ฐ์ด ํ๊ฐ๋๋ค.
justify-items
์ธ๋ผ์ธ(ํ) ์ถ์ ๋ฐ๋ผ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์ ๋ ฌํ๋ค.
๊ฐ์ ์ปจํ ์ด๋ ๋ด๋ถ์ ๋ชจ๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์ ์ฉ๋๋ค.
align-items
์ด ์ถ์ ๋ฐ๋ผ์ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์ ๋ ฌํ๋ค.
justify-items ์ ๋ฐ๋
place-items
align-items, justify-items ๋ฅผ ๋์์ ์ ์ธํ๋ค.
justify-content
์ผ๋จ SKIP
align-content
์ผ๋จ SKIP
place-content
์ผ๋จ SKIP
grid-auto-columns, grid-auto-rows
์ผ๋จ SKIP
grid-auto-flow
์ผ๋จ SKIP
grid
์ผ๋จ SKIP
๊ทธ๋ฆฌ๋ ์์ดํ
์์ ์ฌ์ฉํ๋ CSS ํ๋กํผํฐ
grid-column-start, grid-column-end, grid-row-start, grid-row-end
ํน์ ๊ทธ๋ฆฌ๋ ์ ์ ์ฐธ์กฐํ์ฌ ๊ทธ๋ฆฌ๋ ๋ด์์ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์์น๋ฅผ ๊ฒฐ์ ํฉ๋๋ค
grid-column, grid-row
grid-column-start + grid-column-end, and grid-row-start + grid-row-end
grid-area
์ผ๋จ SKIP
justify-self
align-self
place-self
align-self ์ justify-self ๋ฅผ ํ๋ฒ์ ์ ์ธํ๋ค.
fr
๊ทธ๋ฆฌ๋์์ 1fr๊ณผ ๊ฐ์ ๋ถ์ ๋จ์๋ฅผ ๋ง์ด ์ฌ์ฉํ๋๋ฐ, ๋ถ์ ๋จ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก "๋จ์ ๊ณต๊ฐ์ ์ผ๋ถ"๋ฅผ ์๋ฏธํ๋ค.
๋ฐ๋ผ์ ์๋์ ์ ์๋ 25% 75%๋ฅผ ์๋ฏธํ๋ค. ๋จ, ์ด๋ฌํ ๋ฐฑ๋ถ์จ ๊ฐ์ ๋ถ์ ๋จ์๋ณด๋ค ํจ์ฌ ๋ ๋ช ํํ๋ค.
sizing keyword
px, rem, %
min-content: ์ฝํ ์ธ ์ ์ต์ ํฌ๊ธฐ
max-content: ์ฝํ ์ธ ์ ์ต๋ ํฌ๊ธฐ
auto: fr ๊ณผ ์ ์ฌํ์ง๋ง, ๋จ์ ๊ณต๊ฐ์ ํ ๋นํ ๋ fr ๋จ์์์ ์ฐ์ ์์์์ ๋ฐ๋ฆฐ๋ค.
sizing function
fit-content(): ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ฌ์ฉ. ์ต์ ์ฝํ ์ธ ๋ณด๋ค ์๊ฑฐ๋ ์ต๋ ์ฝํ ์ธ ๋ณด๋ค ํฌ์ง ์์.
minmax(): ์ต์ ๊ฐ๊ณผ ์ต๋ ๊ฐ์ ์ค์ . ์๋ ๋จ์์ ํจ๊ป ์ฌ์ฉํ ๋ ์ ์ฉํจ.
min(): ์ต์ ๊ฐ ์ค์
max(): ์ต๋ ๊ฐ ์ค์
repeat(): repeat ํจ์๋ auto-fill, auto-fit ํจ์์ ํจ๊ป ์ฌ์ฉํ๋ฉด ๋์ฑ ์ ์ฉํ๋ค.
subgrid
์ฐธ์กฐ
Last updated