๐ปgrid๐ป
2์ฐจ์(ํ๊ณผ ์ด) ๋ ์ด์์์ ๋ง๋ค๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋ ์ด์์ ์์คํ ์ด๋ค.
[๊ณตํต ์ฝ๋]
<body>
<div id="box">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
</body> <style>
#box .item:nth-child(1) {background-color: tomato;}
#box .item:nth-child(2) {background-color: orange;}
#box .item:nth-child(3) {background-color: gold;}
#box .item:nth-child(4) {background-color: greenyellow;}
#box .item:nth-child(5) {background-color: cornflowerblue;}
#box .item:nth-child(6) {background-color: violet;}
</style>
๐ถ2ํ 3์ด grid ์ ์ฉ๐ถ
<style>
#box {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}
</style>
๐ถrepeat ํจ์๐ถ
ํน์ ํ ํจํด์ ๋ฐ๋ณตํ์ฌ ์ ์ํ ๋ ์ฌ์ฉํ๋ค.
<style>
#box {
display: grid;
/* grid-template-columns: 100px 100px 100px 100px 100px 100px; */
grid-template-columns: repeat(6, 100px);
}
</style>
๐ถfraction ๋จ์๐ถ
๋ฐฑ๋ถ์จ ๋จ์๋ก ๊ท ๋ฑ๋ถํ ๊ฐ๋ฅํ๋ค.
<style>
#box {
display: grid;
height: 500px;
grid-template-rows: 2fr 1fr;
grid-template-columns: 2fr 1fr 1fr;
}
</style>
๐ถgrid-column ์์ฑ๐ถ
๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ด ์์น๋ฅผ ์ง์ ํ๋ค.
span ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ์ฌ๋ฌ ์ด์ ๊ฑธ์ณ ์๋ ๊ฒฝ์ฐ ๊ฐ๋จํ๊ฒ ํํํ ์ ์๋ค.
1. ์์ ์ด ๋ฒํธ: ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ์์ํ๋ ์ด์ ๋ฒํธ๋ฅผ ๋ํ๋ ๋๋ค.
2. ๋ ์ด ๋ฒํธ: ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ๋๋๋ ์ด์ ๋ฐ๋ก ๋ค์ ๋ฒํธ๋ฅผ ๋ํ๋ ๋๋ค.
#box .item:nth-child(1) {
grid-column-start:1 ;
grid-column-end: 5;
}1์ด๋ถํฐ 5์ด๊น์ง ์๋ฆฌ๋ฅผ ์ฐจ์งํ๋ค.
.item {
grid-column: 1 / 5; /* 1์ด์์ 5์ด๊น์ง ์ฐจ์ง */
}.item {
grid-column: span 4; /* 4๊ฐ์ ์ด์ ๊ฑธ์ณ ์ฐจ์ง */
}๐ถgap ์์ฑ๐ถ
- Grid๋ Flexbox ์ปจํ ์ด๋ ๋ด์์ ์์๋ค ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์ค์ ํ๋ค.
- row-gap: ๊ทธ๋ฆฌ๋์ ํ ๊ฐ๊ฒฉ์ ์ค์ ํ๋ค.
- column-gap: ๊ทธ๋ฆฌ๋์ ์ด ๊ฐ๊ฒฉ์ ์ค์ ํ๋ค.
๐ถminmax ํจ์๐ถ
- ์ปจํ ์ด๋ ๋ด์ ์ด ๋๋ ํ์ ํฌ๊ธฐ๋ฅผ ๋์ ์ผ๋ก ์กฐ์ ํ๋๋ฐ ์ฌ์ฉํ๋ค.
- ์ต์๊ฐ๊ณผ ์ต๋๊ฐ์ ์ง์ ํ์ฌ ๊ทธ๋ฆฌ๋ ์์ดํ ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ค.
- ์ฃผ๋ก ๋ฐ์ํ ๋์์ธ์์ ์ ์ฉํ๊ฒ ์ฌ์ฉํ๋ค.
- ์ต์ ํฌ๊ธฐ๋ฅผ ์ค์ ํ์ฌ ํ๋ฉด์ด ์์์ก์ ๋ ์์ดํ ์ด ๋๋ฌด ์์์ง์ง ์๊ฒ ํ๊ณ , ์ต๋ ํฌ๊ธฐ๋ฅผ ์ค์ ํ์ฌ ํ๋ฉด์ด ์ปค์ก์ ๋ ์์ดํ ์ด ๋๋ฌด ์ปค์ง์ง ์๊ฒ ํ๋ค.
- minmax(min, max)
.container {
display: grid;
grid-template-columns: minmax(100px, 1fr) 1fr 1fr;
}์ฒซ ๋ฒ์งธ ์ด์ ์ต์ 100px, ์ต๋ 1fr์ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๋ฉฐ ๋๋จธ์ง ๋ ์ด์ ๋์ผํ ๋น์จ๋ก ๋๋์ด์ ธ ์ฐจ์งํ๋ค
'WEB > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ๋ฐ์ํ ์น : Media Query (0) | 2023.10.04 |
|---|---|
| [CSS]css ํจ์ viewport-height, minmax, object-fit (0) | 2023.10.04 |
| [CSS] ์์ ๋ฐฐ์น : flex box (0) | 2023.10.04 |
| [CSS] ์ ๋๋ฉ์ด์ ํจ๊ณผ : animation (0) | 2023.10.04 |
| [CSS] ์ ๋๋ฉ์ด์ ํจ๊ณผ : Transition, ์ ํ (0) | 2023.09.27 |
