flex
์ grid
๊ฐ ์๋ค. ์์ดํ
์ ๊ทธ๋ฆฌ๋ ํํ๋ก ๋ฐฐ์นํ ๋๋ ์น์ฌ์ดํธ ๊ตฌ์กฐ ์ ์ฒด๋ฅผ ๊ทธ๋ฆฌ๋ ํํ๋ก ์ก์ ์ ์๋ค.
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap
grid-column-gap
grid-row-gap
grid-template-columns
, grid-template-rows
repeat(n, ๊ฐ๋ก์ฌ์ด์ฆ)
์ ์ฌ์ฉํ๋ฉด ํธํ๋ค. grid-template-columns: 1fr 2fr 1fr
grid-template-columns: repeat(5, 20%);
grid-template-columns: 200px repeat(3, 100px);
grid-template-rows: 150px 150px;
grid-auto-rows
grid-auto-rows: 150px;
grid-auto-rows: minmax(150px, auto);
grid-gap
grid-column-gap
grid-row-gap
grid-gap: 10px;
grid-column-gap: 20px;
grid-row-gap: 5px;
-
grid-column-start
-grid-column-end
-grid-row-start
-grid-row-end
1.grid-column-start
, grid-column-end
grid-column-start: 2;
grid-column-end: 4;
grid-column: 2 / 4;
grid-column: 2 / span 2;
grid-template-areas
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 150px;
grid-template-areas:
"a a b"
"c d b"
"c d e";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}
.item5 {
grid-area: e;
}
์ ๋ง ์ง๊ด์ ์ด๊ณ ํธ๋ฆฌํ๋ค ๐ฅบ๐ฅบ๐ฅบ
.calculator {
border: 1px pink solid;
height: 500px;
width: 300px;
display: grid;
grid-template-rows: 20% 80%;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.buttons :first-child {
grid-column: 1 / 4;
}
.buttons :nth-last-child(3) {
grid-column: 1 / 3;
}
์ง๋๋ฒ์ flex์์ฑ์ผ๋ก ๋ง๋ ๊ณ์ฐ๊ธฐ๋ณด๋ค ํจ์ฌ ํธํ๋ค. ์ฌ์ง์ด ์ด์ ์ธ๋ก๊ฐ๋ ์์ ์์ฌ๋ก ์ด์ฉ๊ฐ๋ฅ! ๊ทธ๋ฆฌ๋๋ก ์ด์ฉํ ๋ ์ด์์์ ์์ฃผ ๋ฉ์ง๊ธฐ ๋๋ฌธ์ ํฌํธํด๋ฆฌ์ค ๋ง๋ค๋๋ ์ ์ฉํ ๊ฒ ๊ฐ๋ค :)
์ญ์ ๊ทธ๋ฆฌ๋๋ง์คํฐ ์ด์ญ๋๋ค....