Flex๊ฐ ํ ๋ฐฉํฅ ๋ ์ด์์ ์์คํ ์ด๋ผ๋ฉด Grid๋ ๋ ๋ฐฉํฅ(๊ฐ๋ก-์ธ๋ก) ๋ ์ด์์ ์์คํ ์ด๋ค.
Grid๋ ๋ถ๋ชจ์์์ ์์์์๋ก ๋๋๋ค ๋ถ๋ชจ์์๋ฅผ Container ์์์์๋ฅผ item ์ด๋ผ ๋ถ๋ฅธ๋ค
๊ฐ๋จํ๊ฒ ์์ ๋ฅผ ๊ตฌํํ๋ฉด์ ์์๋ณด์
grid-template-rows: 150px ํ์ 3๊ฐ๋ฅผ ๋ง๋ค๊ฒ ๋ค๋ ์๋ฏธ๋ค. ์๋์ ๊ฐ์ด repeat๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค.
gird-template-rows: 150px 150px 150px;
grid-template-rows: repeat(3, 150px);
โญ grid-template-rows: repeat(3, 1fr);
๊ทธ๋ฆฌ๋ ํธ๋ ์ฌ์ด์ฆ๋ก ์ฌ์ฉ ๋๋ fr ๋จ์๋ ์ ์ฐํ ๋จ์๋ก ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ์ฌ์ ๊ณต๊ฐ์ ๋น์จ๋ก ๋๋ ์ค์ ํฉ๋๋ค.
ํผ์ผํธ(%) ๋จ์์ ์ ์ฌํด ๋ณด์ผ ์ ์์ผ๋, ํผ์ผํธ ๊ฐ๊ณผ ๋ค๋ฅด๊ฒ ๊ธธ์ด๊ฐ ์๋๋๋ค. ๊ทธ๋์ calc() ํจ์์์ ๋ค๋ฅธ ๊ฐ๊ณผ
ํจ๊ป ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
grid-template-columns: 150px ์ด์ 3๊ฐ๋ฅผ ๋ง๋ค๊ฒ ๋ค๋ ์๋ฏธ๋ค.
gap : ์ด๊ณผ ํ์ 10px ์ฉ ๋์ด๋ค๋ ์๋ฏธ์ด๋ค. ์ด๊ณผ ํ ๋ฐ๋ก ์ฌ์ฉ ํ ์ ์๋ค.
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ด ๋์จ๋ค.
์ฌ์ค ์์์ฒ๋ผ ์ฌ์ฉํ๋ฉด flex๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ ๋ค๋ฅด์ง ์๋ค. grid-template-areas ๋ฅผ ์ฌ์ฉํด๋ณด์
โญ grid-template-areas๋ ๊ฐ๊ฐ์ ํ๊ณผ ์ด์ ์ด๋ฆ์ ๋ถ์ฌ ํด๋น ์์ญ์ ํน์ ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์์นํ๋๋ก ํ๋ค.
์ถ์ฒ
https://yamoo9.gitbook.io/css-grid/css-grid-guide/fr-unit
https://www.youtube.com/watch?v=nxi1EXmPHRs