Css Grid ์ •๋ฆฌ ๐Ÿš—

c_yjยท2022๋…„ 12์›” 2์ผ
0

Grid๋ž€ ?

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 ์”ฉ ๋„์šด๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์—ด๊ณผ ํ–‰ ๋”ฐ๋กœ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • row-gap : 10px;
  • column-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

profile
FrontEnd Developer

0๊ฐœ์˜ ๋Œ“๊ธ€