Search
๐Ÿ“

CSS: Grid Layout

๐Ÿง‘๐Ÿผโ€๐Ÿš€ Grid Layout๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

โ—์›นํŽ˜์ด์ง€์—์„œ ์š”์†Œ๋ฅผ ์ปค๋‹ค๋ž€ ํ…Œ์ด๋ธ” ์ฒ˜๋Ÿผ ํ–‰๊ณผ ์—ด๋กœ ๊น”๋”ํ•˜๊ฒŒ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด

๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

Grid ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ, ์›นํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŽจ CSS: Grid Layout

์œ ํŠœ๋ธŒ ๊ฐ•์˜์‹ค ๋ฏธ์…˜ ์ด์ „์˜ UI๋“ค์€ ์ฃผ๋กœ ํ•œ ๋ฐฉํ–ฅ ๋ ˆ์ด์•„์›ƒ์„ ๊ณ ๋ คํ•œ Flex ์†์„ฑ์„ ํ™œ์šฉํ•œ 1์ฐจ์›์ด์—ˆ๋‹ค๋ฉด, Grid๋Š” ๋‘ ๋ฐฉํ–ฅ(๊ฐ€๋กœ-์„ธ๋กœ)๋ฅผ ๊ณ ๋ คํ•œ 2์ฐจ์› ๋ ˆ์ด์•„์›ƒ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ํ†ตํ•ด ์ฝ˜ํ…์ธ ๋ฅผ ํ–‰๊ณผ ์—ด์— ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋ณต์žกํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์ง๊ด€์ ์œผ๋กœ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
CSS ๊ทธ๋ฆฌ๋“œ์˜ ๋‘๊ฐ€์ง€ ์ฃผ์š” ์š”์†Œ๋Š” wrapper(๋ถ€๋ชจ ์š”์†Œ)์™€ items(์ž์‹ ์š”์†Œ)์ž…๋‹ˆ๋‹ค. wrapper๋Š” ๊ฐ์‹ธ์ฃผ๋Š” ๊ทธ๋ฆฌ๋“œ์ด๊ณ  item๋“ค์€ ๊ทธ๋ฆฌ๋“œ ๋‚ด๋ถ€์˜ ์š”์†Œ๋“ค์ž…๋‹ˆ๋‹ค.
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
HTML
์—ฌ๊ธฐ์„œ ๋ถ€๋ชจ div๋ฅผ grid๋กœ ๋ฐ”๊พธ๋ ค๋ฉด, display๋ฅผ grid๋กœ ์„ค์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
.wrapper { display: grid; }
CSS
ํ˜„์žฌ๋Š” ์–ด๋–ป๊ฒŒ grid๋ฅผ ์„ค์ •ํ•  ๊ฒƒ์ธ์ง€ ์…‹ํŒ…ํ•œ ๊ฐ’์ด ์—†์œผ๋ฏ€๋กœ ๋‹จ์ˆœํžˆ 5๊ฐœ์˜ div๋“ค์ด ์Œ“์—ฌ์žˆ๋Š” ๋ชจ์Šต์œผ๋กœ ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค.

Column๊ณผ row

๊ทธ๋ฆฌ๋“œ๋ฅผ 2์ฐจ์›์œผ๋กœ ๋‚˜๋ˆ„๊ธฐ ์œ„ํ•ด์„œ๋Š” column๊ณผ row๋ฅผ ์ •์˜ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด 3๊ฐœ์˜ column๊ณผ 2๊ฐœ์˜ row๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
.wrapper { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 50px 50px; }
CSS
grid-template-columns์— 3๊ฐœ์˜ ๊ฐ’, grid-template-rows์— 2๊ฐœ์˜ ๊ฐ’์„ ์ •์˜ํ•ด์ฃผ๋ฉด 3๊ฐœ์˜ column๊ณผ 2๊ฐœ์˜ row๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ’๋“ค์€ column์˜ ๋„ˆ๋น„(200px)์™€, row์˜ ๋†’์ด(50px)์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
์ด ์™ธ์— ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ํšจ๊ณผ์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ์†์„ฑ๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“˜ ์ •๋ฆฌ

โ€ข
Grid Layout์€ 2์ฐจ์›์œผ๋กœ ์›นํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๋ ˆ์ด์•„์›ƒ ๋ฐฉ๋ฒ•์ด๋‹ค.

๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ

โ€ข