๐minmax ํจ์ ๋จผ์ ๋ณด๊ณ ์ค๊ธฐ
1. grid-auto-rows(grid-auto-cols๋ ์์ต๋๋ค)
.grid-area {
display: grid;
grid-template-columns: repeat(5, minmax(100px, 1fr));
/* grid-template-rows: repeat(10, minmax(100px, 1fr)); */
grid-auto-rows: minmax(100px, 1fr);
width: 100%;
}
- `grid-template-rows`์ ์ญํ ์ ๋ช ํ์ด ์ฌ ์ง ๊ฐ์๋ฅผ ์ ์ผ๋ฉด์ ํ์ ๋์ด๋ฅผ ์ ํด์ค ์๊ฐ ์์ฃ .(1ํ๋ง ์ค๋ ๊ฒฝ์ฐ ๋์ด๋ง ์ง์ . 1ํ๋ง์ ๋์ด๋ง ์ง์ ํ ๊ฒฝ์ฐ grid-template-rows: 50px์ด๋ grid-auto-rows: 50px์ด๋ ๋์ผํ ํจ๊ณผ.)
- `grid-auto-rows` ์ ์ญํ ์ ์์๊ฐ ์ผ๋ง๋ ์ฌ ์ง ๋ชจ๋ฅผ ๋ ์์์ rows ์ ๋์ด๋ฅผ ๋ง์ถฐ์ฃผ๋ ์ญํ ์ ํฉ๋๋ค. ์์์ ํ์ด ๋ช ํ์ด ๋์ค๋์ง๋ ์๊ดํ์ง ์๊ณ ๊ฐ ํ์ ๋์ด๋ฅผ ์ง์ ํด์ค ์ ์์ต๋๋ค. (background-color ๋ #BA55D3 ์๊น์ด ๊น๋ ค ์์ต๋๋ค.)
- `grid-auto-flow: ;`๋์ ์๋ฌด ์๊ด ์๋ ๊ฐ๋ ์ ๋๋ค. grid-auto-flow ๋ grid ๋ด๋ถ์์ ์๋ ๋ฐฐ์น๋ ์์ดํ ๋ค์ด ์ด๋ ๋ฐฉํฅ์ผ๋ก ํ๋ฅผ ์ง ์ ํด์ค๋๋ค.

๋ง์ฝ grid-auto-rows๋ฅผ ์ฐ์ง ์๊ณ grid-template-rows ๋ฅผ ์ด๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์?
rows๋ฅผ ์ด๋ป๊ฒ ํด์๋ 10์นธ ๋์ด๋งํผ ์ฑ์ฐ๋ ค๊ณ ํ๋๊ตฐ์. ๋ชฉ์ ์ ๋ง๊ฒ ์ ๊ณจ๋ผ์ ์จ์ผ๊ฒ ์ต๋๋ค.
*๋ถํ์ํ๊ฒ ๋์ ๊ฐ์ด ์ธ ํ์๊ฐ ์์ต๋๋ค.

tailwind๋ ๊ฐ์ด ์ด๋ค๋ฉด?
/* ๋ฐฉ๋ฒ 1 */
<div className='grid w-full auto-rows-[minmax(100px,auto)] grid-cols-[repeat(5,minmax(100px,1fr))] grid-rows-[minmax(100px,1fr)] gap-1 bg-primary text-white '>
{items.map(item => (
<div className='bg-violet-600 odd:bg-sky-600' key={item}>
{item}
</div>
))}
</div>
/* ๋ฐฉ๋ฒ 2 */
<div className='grid-area gap-1 bg-primary text-white'>
{items.map(item => (
<div className='bg-violet-600 odd:bg-sky-600' key={item}>
{item}
</div>
))}
</div>