π»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 |
