display ์์ฑ์ Grid๋ inline-grid์ผ๋ก ์ค์ ํฉ๋๋ค.
.parent {
display: grid; /* BFC */
display: inline-grid; /* IFC */
}
grid-template-rows ์์ฑ์ ํ์ ์ ์ํ๊ณ , grid-template-columns์ ์ด์ ์ ์ํฉ๋๋ค.
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(3, 100px); /* ์ ์ฝ๋์ ๋์ผ */
grid-template-rows: 50px 50px;
grid-template: 50px 50px / 100px 100px 100px; /* rows / columns ๋ก ์ถ์ฝ๊ฐ๋ฅ */
}
grid-template-rows์ ๋ํด ๋ ๊ฐ์ ๊ฐ์ ์ง์ ํ์ผ๋ฏ๋ก 50px๋์ด์ ๋ ๊ฐ์ ํ์ ์ป๊ณ grid-template-columns์ ๋ํด ์ธ ๊ฐ์ ๊ฐ์ ์ง์ ํ์ผ๋ฏ๋ก 100px ๋๋น์ ์ธ ๊ฐ์ ์ด์ ์ป์์ต๋๋ค(3 X 2).
์์๋ค ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์ง์ ํฉ๋๋ค.
์ด CSS ์์ฑ๋ค์ ํด๋น ์์์ ์์น๋ฅผ โโ์ง์ ํ๊ณ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํฉ๋๋ค.
.item1 {
grid-column-start: 1; /* 1๋ฒ์งธ column์์ ์์ํด์ */
grid-column-end: 4; /* 4๋ฒ์งธ column์ ๊น์ง ์ฐจ์ง */
grid-column: 1 / 4; /* start / end ๋ก ์ถ์ฝ๊ฐ๋ฅ */
}
.item2 {
grid-row-start: 2; /* 2๋ฒ์งธ row์์ ์์ํด์ */
grid-row-end: 4; /* 4๋ฒ์งธ row์ ๊น์ง ์ฐจ์ง */
grid-row: 2 / 4; /* grid-column๊ณผ ๋์ผ */
}
.item3 {
grid-row: 2 / span 2; /* span์ ์ฌ์ฉํ๋ฉด span๋ค์ ๋์จ ์ซ์๋งํผ(2๋ฒ์งธ row๋ถํฐ 2์นธ์ row) ์ฐจ์ง */
}
.item4 {
grid-area: 1 / span 3 / 2 / span 2; /* grid-row-start / grid-column-start / grid-row-end / grid-cloumn-end๋ฅผ ์ถ์ฝ */
}
ํด๋น CSS ์์ฑ์ ํด๋น ์์์ ๋ฐฐ์น ์์๋ฅผ ์ง์ ํฉ๋๋ค.
๊ธฐ๋ณธ๊ฐ์ 0
์ด๋ฉฐ ๊ฐ์ด ํด์๋ก ๋ค์ ๋ฐฐ์น๋ฉ๋๋ค.
fr์ด๋ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋๋ด ๋จ์ ๊ณต๊ฐ ๋น์จ ๋จ์์ ๋๋ค.
.grid {
display: grid;
grid-template-columns: auto 100px 1fr 2fr;
}
3๋ฒ์งธ ์ด์ ๋จ์ ๊ณต๊ฐ์ค 1/3์ ์ฐจ์งํ๋ฉฐ 4๋ฒ์งธ ์ด์ 2/3์ ์ฐจ์งํฉ๋๋ค.