yyezzzy 2024. 6. 10. 14:59

.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 ๊ฐ’์ด ์žˆ์„ ๋•Œ, ๊ฐ๊ฐ์˜ ๊ฐ’์€ ์ „์ฒด ๊ฐ€์šฉ ๊ณต๊ฐ„์˜ ๋น„์œจ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.