๋ฐ˜์‘ํ˜•

grid-row-start, grid-row-end ์†์„ฑ์€ ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ์ด ์–ด๋А ํ–‰ ๋ผ์ธ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์–ด๋А ํ–‰ ๋ผ์ธ์—์„œ ๋๋‚ ์ง€ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์ด ์†์„ฑ์€ ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ(๊ทธ๋ฆฌ๋“œ ์ปจํ…Œ์ด๋„ˆ์˜ ์ง๊ณ„ ์ž์‹ ์š”์†Œ) ์ž์ฒด์— ์ ์šฉํ•œ๋‹ค. ์ฐธ๊ณ ๋กœ ๊ทธ๋ฆฌ๋“œ ๋ผ์ธ์€ ์ปจํ…Œ์ด๋„ˆ ์‹œ์ž‘ ์ง€์ ๋ถ€ํ„ฐ 1, 2, 3, … ์–‘์ˆ˜ ๋ฒˆํ˜ธ๊ฐ€ ๋ถ€์—ฌ๋˜๊ณ , ์ปจํ…Œ์ด๋„ˆ ๋ ์ง€์ ๋ถ€ํ„ฐ๋Š” -1, -2, -3, … ์Œ์ˆ˜ ๋ฒˆํ˜ธ๊ฐ€ ๋ถ€์—ฌ๋œ๋‹ค.

/* ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ์ด 1~2๋ฒˆ ๋ผ์ธ ์ฐจ์ง€(์ฒซ ๋ฒˆ์งธ ํ–‰ ํŠธ๋ž™) */
grid-row-start: 1; 
grid-row-end: 2;

 

grid-row-start: 1; grid-row-end: 2;

 

span์€ ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ์ด ์ฐจ์ง€ํ•  ํŠธ๋ž™์˜ ๊ฐœ์ˆ˜๋ฅผ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ํŠธ๋ž™(track)์ด๋ž€ ๋‘ ๊ทธ๋ฆฌ๋“œ ๋ผ์ธ ์‚ฌ์ด์˜ ๊ณต๊ฐ„์„ ์˜๋ฏธํ•œ๋‹ค. ๊ทธ๋ฆฌ๋“œ ์…€ 1๊ฐœ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•˜๋‚˜์˜ ํ–‰ ํŠธ๋ž™๊ณผ, ํ•˜๋‚˜์˜ ์—ด ํŠธ๋ž™์ด ๊ต์ฐจํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง€๋Š” ์ตœ์†Œ ๋‹จ์œ„ ๊ณต๊ฐ„์œผ๋กœ, ํ•œ ์นธ์„ ์˜๋ฏธํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด span 2 ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•„์ดํ…œ์ด 2๊ฐœ์˜ ํ–‰(๋˜๋Š” ์—ด) ํŠธ๋ž™์„ ์ฐจ์ง€ํ•˜๋„๋ก ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

grid-row-start: auto; /* ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋™์œผ๋กœ ์•„์ดํ…œ ํ–‰ ์‹œ์ž‘ ์œ„์น˜ ๊ฒฐ์ • */
grid-row-end: span 2; /* ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ์ด ์‹œ์ž‘ ์ง€์ ๋ถ€ํ„ฐ 2๊ฐœ ํ–‰ ์ฐจ์ง€ */

 

grid-row-start: auto; grid-row-end: span 2;

 

grid-row ์†์„ฑ์€ ํ–‰ ์‹œ์ž‘ ์œ„์น˜(์ฒซ ๋ฒˆ์งธ ๊ฐ’; grid-row-start)์™€ ์ข…๋ฃŒ ์œ„์น˜(๋‘ ๋ฒˆ์งธ ๊ฐ’: grid-row-end)๋ฅผ ํ•œ ๋ฒˆ์— ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์ถ• ์†์„ฑ์ด๋‹ค. ๋‘ ๊ฐ’์€ ์Šฌ๋ž˜์‹œ / ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ตฌ๋ถ„ํ•œ๋‹ค.

grid-row: auto / span 2;
/* ์•„๋ž˜์™€ ๋™์ผ */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */

 

grid-row ์†์„ฑ์˜ ๋‘ ๋ฒˆ์งธ ๊ฐ’์„ ์ƒ๋žตํ•˜๋ฉด grid-row-end ๊ฐ’์€ auto(ํ•˜๋‚˜์˜ ํŠธ๋ž™๋งŒ ์ฐจ์ง€)๋กœ ์„ค์ •๋œ๋‹ค.

grid-row: 2;
/* ์•„๋ž˜์™€ ๋™์ผ (2~3๋ฒˆ ๋ผ์ธ ์ฐจ์ง€) */
/* grid-row-start: 2; */
/* grid-row-end: auto; */
/* -> grid-row-end: 3 ํ˜น์€ grid-row-end: span 1 ๊ณผ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ */

 

์‹œ์ž‘/์ข…๋ฃŒ ๋ผ์ธ ๋ชจ๋‘ ๋™์ผํ•œ span ๊ฐ’์„ ์ง€์ •ํ•˜๋ฉด, grid-row-end๋งŒ ์ง€์ •ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค. CSS ๋ช…์„ธ์— ๋”ฐ๋ฅด๋ฉด, ์‹œ์ž‘/์ข…๋ฃŒ ๋ผ์ธ ๊ฐ’์ด ๊ฐ™์„ ๊ฒฝ์šฐ ์ข…๋ฃŒ ๋ผ์ธ์€ ๋ฌด์‹œ๋˜์–ด auto๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค. ์‹œ์ž‘ ๋ผ์ธ์ด span, ์ข…๋ฃŒ ๋ผ์ธ์ด auto ์ผ ๋•, ์‹œ์ž‘ ๋ผ์ธ auto, ์ข…๋ฃŒ ๋ผ์ธ span์œผ๋กœ ์ง€์ •ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค(์ฐธ๊ณ ๊ธ€).

 

์ฐธ๊ณ ๋กœ Tailwind CSS์˜ row-span-2 ๊ฐ™์€ ํด๋ž˜์Šค๋„ ๋‚ด๋ถ€์ ์œผ๋กœ grid-row: span 2 / span 2 ํ˜•ํƒœ๋กœ ์ง€์ •๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฒฐ๊ณผ์ ์œผ๋กœ grid-row: auto / span 2์™€ ๋™์ผํ•˜๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

grid-row: span 2 / span 2;
/* ์•„๋ž˜์ฒ˜๋Ÿผ ๋™์ž‘ (ํ˜„์žฌ ์œ„์น˜์—์„œ 2๊ฐœ์˜ ํ–‰ ํŠธ๋ž™ ์ฐจ์ง€) */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */

 

์†์„ฑ ๊ฐ’์— span ํ‚ค์›Œ๋“œ๋ฅผ ๋‹จ๋…์œผ๋กœ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ๋„ ์‹œ์ž‘ ๋ผ์ธ auto, ์ข…๋ฃŒ ๋ผ์ธ span์œผ๋กœ ํ•ด์„๋ผ์„œ gird-row-end๋งŒ ์ง€์ •ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.

grid-row: span 2;
/* grid-row: span 2 / auto; */ 
/* -> grid-row: auto / span 2; ์ฒ˜๋Ÿผ ๋™์ž‘ */

 

๐Ÿ’ก grid-column, grid-row๋Š” ๊ฐ๊ฐ ์ˆ˜ํ‰(์—ด), ์ˆ˜์ง(ํ–‰) ๋ฐฉํ–ฅ ์ฐจ์ด๋งŒ ์žˆ์„ ๋ฟ ์†์„ฑ์˜ ๋™์ž‘ ์›๋ฆฌ๋Š” ๋™์ผํ•˜๋‹ค.

๋ฐ˜์‘ํ˜•