.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}์ค๋ช
repeat(3, 1fr):repeat ํจ์๋ ๋ฐ๋ณต์ ์ธ ๊ทธ๋ฆฌ๋ ํธ๋์ ์ ์ํฉ๋๋ค.์ฒซ ๋ฒ์งธ ์ธ์์ธ 3์ ๋ฐ๋ณต ํ์๋ฅผ ์๋ฏธํฉ๋๋ค. ์ฌ๊ธฐ์๋ 3๋ฒ ๋ฐ๋ณต๋ฉ๋๋ค.๋ ๋ฒ์งธ ์ธ์์ธ 1fr์ ๊ฐ ํธ๋์ ํฌ๊ธฐ๋ฅผ ์ ์ํฉ๋๋ค. ์ฌ๊ธฐ์ 1fr์ ๊ทธ๋ฆฌ๋ ์ปจํ
์ด๋ ๋ด์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋น์จ์ ์๋ฏธํฉ๋๋ค.fr ๋จ์fr(Fraction Unit):fr ๋จ์๋ CSS Grid์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ถํ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.์๋ฅผ ๋ค์ด, 1fr์ ๊ฐ์ฉ ๊ณต๊ฐ์ 1๋ถ๋ถ์ ์๋ฏธํฉ๋๋ค. ์ฌ๋ฌ fr ๊ฐ์ด ์์ ๋, ๊ฐ๊ฐ์ ๊ฐ์ ์ ์ฒด ๊ฐ์ฉ ๊ณต๊ฐ์ ๋น์จ์ ์ ์ํฉ๋๋ค.