[CSS] grid-template-columns
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}๐ง ๊ตฌ์ฑ ์์ ์ค๋ช
โ
grid-template-columnsCSS Grid์ ์ด ๋๋น๋ฅผ ์ค์ ํ๋ ์์ฑ์
๋๋ค.โ
repeat(3, 1fr)repeat() ํจ์๋ ๊ฐ์ ๊ฐ์ ๋ฐ๋ณตํ ๋ ์ฌ์ฉํ๋ ์ถ์ฝ ๋ฌธ๋ฒ์
๋๋ค.repeat(3, 1fr)๋ 1fr 1fr 1fr์ ๋์ผํ ์๋ฏธ์
๋๋ค.์ฌ๊ธฐ์ fr์ **fractional unit (๋น์จ ๋จ์)**๋ก, ๋จ์ ๊ณต๊ฐ์ ๊ท ๋ฑํ๊ฒ ๋๋๋ ๋จ์์
๋๋ค.๐ฏ ์๋ฏธ ์ ๋ฆฌ๊ทธ๋ฆฌ๋๋ฅผ 3๊ฐ์ ์ด๋ก ๋๋๋,๊ฐ ์ด์ ๋๋น๋ฅผ ๋์ผํ๊ฒ (1fr) ์ค์ ํ๊ฒ ๋ค๋ ๋ป์
๋๋ค. 1 2 3์ด๋ ๊ฒ ํ๋ฉด 3๊ฐ์ ์นธ์ด ์ํ์ผ๋ก ๊ท ๋ฑํ๊ฒ ๋ฐฐ์น๋ฉ๋๋ค.ํ์ํ๋ค๋ฉด r..