μ΅μ μ λ©λͺ¨λ¦¬ μ¬μ©λκ³Ό ν¨μ¨μ μΈ λ μ΄μμ κ³μ°μ μν CSS 그리λ νΈλ ν¬κΈ° μ‘°μ λ§μ€ν°νκΈ°, μ μΈκ³μ μΌλ‘ μ±λ₯μ΄ λ°μ΄λ μΉ μ ν리μΌμ΄μ 보μ₯.
CSS 그리λ νΈλ ν¬κΈ° μ‘°μ λ©λͺ¨λ¦¬ μ΅μ ν: λ μ΄μμ κ³μ° ν¨μ¨μ±
λμμμ΄ μ§ννλ μΉ κ°λ° νκ²½μμ μ±λ₯μ μ μΈκ³ κ°λ°μλ€μκ² κ°μ₯ μ€μν κ΄μ¬μ¬λ‘ λ¨μ μμ΅λλ€. μ ν리μΌμ΄μ μ 볡μ‘μ±μ΄ μ¦κ°νκ³ μ¬μ©μμ λκΉ μκ³ λ°μμ μΈ κ²½νμ λν κΈ°λμΉκ° λμμ§μ λ°λΌ, νλ‘ νΈμλ μ½λμ λͺ¨λ μΈ‘λ©΄μ μ΅μ ννλ κ²μ΄ μ€μν΄μ§λλ€. 볡μ‘νκ³ μ μ°ν 그리λ κΈ°λ° λ μ΄μμμ λ§λλ κ°λ ₯ν λκ΅¬μΈ CSS 그리λ λ μ΄μμμ μμ²λ λμμΈ κ°λ₯μ±μ μ 곡ν©λλ€. κ·Έλ¬λ κ°λ ₯ν κΈ°μ μ΄λΌλ©΄ λͺ¨λ κ·Έλ λ―μ΄, μ΄λ₯Ό ν¨κ³Όμ μΌλ‘ ꡬννλ κ²μ λ©λͺ¨λ¦¬ μ¬μ©λκ³Ό λ μ΄μμ κ³μ° ν¨μ¨μ±μ ν° μν₯μ λ―ΈμΉ μ μμ΅λλ€. μ΄ μ¬μΈ΅ κ°μ΄λμμλ CSS 그리λ νΈλ ν¬κΈ° μ‘°μ μ 볡μ‘μ±μ νꡬνκ³ λ©λͺ¨λ¦¬ μ΅μ νλ₯Ό μν μ€ν κ°λ₯ν μ λ΅μ μ 곡νμ¬, μ¬λ¬λΆμ λ μ΄μμμ΄ μ μΈκ³ μ¬μ©μλ€μκ² μκ°μ μΌλ‘ μλ¦λ΅κ³ μ±λ₯ λν λ°μ΄λλλ‘ λ³΄μ₯ν©λλ€.
CSS 그리λ νΈλ ν¬κΈ° μ‘°μ μ΄ν΄
CSS 그리λ λ μ΄μμμ 그리λ 컨ν μ΄λμ κ·Έ μ§μ μ μΈ μμμΈ κ·Έλ¦¬λ μμ΄ν μ κ°λ μ κΈ°λ°μΌλ‘ μλν©λλ€. 그리λ μ체λ 그리λ μ μ¬μ΄μ 곡κ°μΈ νΈλμΌλ‘ μ μλ©λλ€. μ΄λ¬ν νΈλμ ν λλ μ΄μ΄ λ μ μμ΅λλ€. μ΄λ¬ν νΈλμ ν¬κΈ° μ‘°μ μ 그리λκ° μ΄λ»κ² μ μνκ³ λ λλ§λλμ§μ κΈ°μ΄μ λλ€. νΈλ ν¬κΈ° μ‘°μ μ κ΄λ ¨λ μ£Όμ λ¨μ λ° ν€μλλ λ€μκ³Ό κ°μ΅λλ€.
- κ³ μ λ¨μ: ν½μ (px), em, rem. μ΄λ€μ μ νν μ μ΄λ₯Ό μ 곡νμ§λ§ λ°μν λμμΈμλ λ μ μ°ν μ μμ΅λλ€.
- λ°±λΆμ¨ λ¨μ (%): 그리λ 컨ν μ΄λ ν¬κΈ°μ μλμ μ λλ€. λΉμ¨ κΈ°λ° ν¬κΈ° μ‘°μ μ μ μ©ν©λλ€.
- κ°λ³ λ¨μ (fr): 'λΆμ λ¨μ'λ 그리λμ ν΅μ¬ κ΅¬μ± μμμ λλ€. 그리λ 컨ν μ΄λμ μ¬μ© κ°λ₯ν 곡κ°μ μΌλΆλ₯Ό λνλ λλ€. μ΄λ μ λμ μ΄κ³ λ°μμ μΈ λ μ΄μμμ λ§λλ λ° νΉν κ°λ ₯ν©λλ€.
- ν€μλ:
auto,min-content,max-content. μ΄λ¬ν ν€μλλ 그리λ μμ΄ν λ΄μ μ½ν μΈ λ₯Ό κΈ°λ°μΌλ‘ μ§λ₯μ μΈ ν¬κΈ° μ‘°μ μ μ 곡ν©λλ€.
λ μ΄μμ κ³μ°μμ `fr` λ¨μμ μν
fr λ¨μλ ν¨μ¨μ μ΄κ³ λμ μΈ κ·Έλ¦¬λ λ μ΄μμμ μ΄μμ
λλ€. fr λ¨μλ₯Ό μ¬μ©νμ¬ νΈλμ μ μν λ λΈλΌμ°μ λ μ¬μ© κ°λ₯ν 곡κ°μ μ§λ₯μ μΌλ‘ λΆλ°°ν©λλ€. μλ₯Ό λ€μ΄, grid-template-columns: 1fr 2fr 1fr;μ μ¬μ© κ°λ₯ν 곡κ°μ΄ λ€ κ°μ λμΌν λΆλΆμΌλ‘ λλλ€λ κ²μ μλ―Έν©λλ€. 첫 λ²μ§Έ νΈλμ ν λΆλΆμ, λ λ²μ§Έ νΈλμ λ λΆλΆμ, μΈ λ²μ§Έ νΈλμ ν λΆλΆμ μ°¨μ§ν©λλ€. μ΄ κ³μ°μ 컨ν
μ΄λ ν¬κΈ°λ₯Ό κΈ°λ°μΌλ‘ λμ μΌλ‘ μ΄λ£¨μ΄μ§λλ€.
λ©λͺ¨λ¦¬ μν₯: fr λ¨μλ κ³΅κ° λΆλ°°μ λ³Έμ§μ μΌλ‘ ν¨μ¨μ μ΄μ§λ§, νΉν λ°μν λ―Έλμ΄ μΏΌλ¦¬ μμ μ€μ²©λκ±°λ λ€λ₯Έ ν¬κΈ° λ¨μμ κ²°ν©λ λ fr λ¨μμ 볡μ‘ν μ‘°ν©μ λΈλΌμ°μ μ λ μ΄μμ μμ§μ κ³μ° μ€λ²ν€λλ₯Ό μΆκ°ν μ μμ΅λλ€. μμ§μ μ΄ 'λΆμ ν'μ κ³μ°ν λ€μ μ΄λ₯Ό λΆλ°°ν΄μΌ ν©λλ€. μλ§μ νΈλμ κ±Έμ³ λ§μ fr λ¨μλ₯Ό κ°μ§ λ§€μ° λ³΅μ‘ν 그리λμ κ²½μ°, μ΄λ λ μ΄μμ κ³μ° μκ°μ μμΈμ΄ λ μ μμ΅λλ€.
`auto`, `min-content`, `max-content` νμ©
μ΄λ¬ν ν€μλλ κ°λ ₯ν μ½ν μΈ μΈμ ν¬κΈ° μ‘°μ κΈ°λ₯μ μ 곡νμ¬ μλ κ³μ°μ΄λ μ§λμΉκ² λ¨μν κ³ μ ν¬κΈ° μ‘°μ μ νμμ±μ μ€μ¬μ€λλ€.
auto: νΈλ ν¬κΈ°λ 그리λ μμ΄ν λ΄ μ½ν μΈ μ ν¬κΈ°μ λ°λΌ κ²°μ λ©λλ€. μ½ν μΈ κ° λ§μ§ μμΌλ©΄ λμ³νλ¦ λλ€.min-content: νΈλμ κ°λ₯ν κ°μ₯ μμ κ³ μ ν¬κΈ°λ‘ ν¬κΈ° μ‘°μ λ©λλ€. μΌλ°μ μΌλ‘ μ½ν μΈ λ΄μμ κ°μ₯ μμ μ€ λ°κΏ λΆκ°λ₯ν μμμ ν¬κΈ°μ λλ€.max-content: νΈλμ κ°λ₯ν κ°μ₯ ν° κ³ μ ν¬κΈ°λ‘ ν¬κΈ° μ‘°μ λ©λλ€. μΌλ°μ μΌλ‘ κ°μ₯ κΈ΄ μ€ λ°κΏ λΆκ°λ₯ν λ¨μ΄λ μμμ λλΉμ λλ€.
λ©λͺ¨λ¦¬ μν₯: μ΄λ¬ν ν€μλλ₯Ό μ¬μ©νλ κ²μ λΈλΌμ°μ κ° νΈλ ν¬κΈ°λ₯Ό κ²°μ νκΈ° μν΄ κ·Έλ¦¬λ μμ΄ν
μ μ½ν
μΈ λ§ κ²μ¬νλ©΄ λλ―λ‘ λ§€μ° ν¨μ¨μ μΌ μ μμ΅λλ€. κ·Έλ¬λ 그리λ μμ΄ν
μ λ§€μ° λ§μ μμ μ½ν
μΈ λ λ§€μ° λμ μ€ λ°κΏ λΆκ°λ₯ν μμκ° ν¬ν¨λμ΄ μμΌλ©΄ max-content ν¬κΈ°λ₯Ό κ³μ°νλ κ²μ΄ κ³μ°μ μΌλ‘ λΆλ΄μ€λ¬μΈ μ μμ΅λλ€. λ§μ°¬κ°μ§λ‘, κΉκ² μ€μ²©λ μμμ κ²½μ° min-contentλ₯Ό κ²°μ νλ λ° μλΉν νμ±μ΄ νμν μ μμ΅λλ€. ν΅μ¬μ κΈ°λ³Έκ°μΌλ‘ μ¬μ©νλ λμ μ½ν
μΈ κ° ν¬κΈ° μ‘°μ μ κ²°μ νλ κ³³μ νλͺ
νκ² μ¬μ©νλ κ²μ
λλ€.
그리λ νΈλ ν¬κΈ° μ‘°μ μ μν λ©λͺ¨λ¦¬ μ΅μ ν μ λ΅
CSS 그리λ νΈλ ν¬κΈ° μ‘°μ μμ λ©λͺ¨λ¦¬ μ¬μ©λκ³Ό λ μ΄μμ κ³μ° ν¨μ¨μ±μ μ΅μ ννλ κ²μ μ μ€ν CSS μμ±, λΈλΌμ°μ λ λλ§ μ΄ν΄, λͺ¨λ² μ¬λ‘ μ±νμ μ‘°ν©νλ κ²μ ν¬ν¨ν©λλ€. λ€μμ μ¬λ¬ μ λ΅μ λλ€.
1. λ¨μμ±μ μμ©νκ³ λ³΅μ‘μ±μ νΌνμμμ€
μ΅μ νλ₯Ό μν κ°μ₯ κ°λ¨ν μ κ·Ό λ°©μμ 그리λ μ μλ₯Ό κ°λ₯ν ν λ¨μνκ² μ μ§νλ κ²μ
λλ€. 그리λμ 볡μ‘ν μ€μ²©, λ§€μ° ν° κ·Έλ¦¬λμμ fr λ¨μμ κ³Όλν μ¬μ© λλ λ€μν ν¬κΈ° λ¨μμ 볡μ‘ν μ‘°ν©μ κ³μ° λΆνλ₯Ό μ¦κ°μν¬ μ μμ΅λλ€.
- μ€μ²© 그리λ μ ν: 그리λλ μ€μ²©μ κ°λ ₯νμ§λ§, κΉμ μ€μ²©μ μ°μμ μΈ κ³μ°μΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€. λ μ΄μμμ΄ μ§λμΉκ² 볡μ‘ν΄μ§λ©΄ λμμ μΈ μ κ·Ό λ°©μμ κ³ λ €νμμμ€.
- ν©λ¦¬μ μΈ `fr` λ¨μ μ¬μ©: μΌλ°μ μΈ λ°μν λ μ΄μμμ κ²½μ°, λͺ κ°μ
frλ¨μλ‘ μΆ©λΆν©λλ€. μ λμ μΌλ‘ νμν κ²½μ°κ° μλλ©΄ μμ κ°μfrλ¨μλ₯Ό κ°μ§ 그리λλ₯Ό μ μνμ§ λ§μμμ€. - κ°λ₯νλ©΄ κ³ μ λ¨μ λμ `auto` λλ `fr` μ νΈ: μ½ν
μΈ λ νλ©΄ ν¬κΈ°μ λ§μΆ°μ ΈμΌ νλ μμμ κ²½μ°,
autoλλfrλ¨μλ μ¬κ³μ°μ μ§μμ μΌλ‘ νμλ‘ ν μ μλ κ³ μ ν½μ κ°λ³΄λ€ μΌλ°μ μΌλ‘ λ ν¨μ¨μ μ λλ€.
κΈλ‘λ² μ: μ μΈκ³ μλ°±λ§ λͺ
μ΄ μ¬μ©νλ μ μμκ±°λ μ ν λͺ©λ‘ νμ΄μ§λ₯Ό μμν΄ λ³΄μΈμ. μ ν μΉ΄λμ λν κ°λ¨ν 그리λ(μ: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));)λ λ€μν νλ©΄ ν¬κΈ°λ₯Ό ν¨μ¨μ μΌλ‘ μ²λ¦¬νλ©°, λΈλΌμ°μ κ° κ° μ ν μΉ΄λμ λν΄ λ³΅μ‘ν νλͺ©λ³ κ³μ°μ μνν νμκ° μμ΅λλ€. μ΄ λ¨μΌνκ³ μ°μν κ·μΉμ λ€μν μ₯μΉμμ μλ§μ μ¬μ©μλ₯Ό μν λ λλ§μ μ΅μ νν©λλ€.
2. `repeat()` λ° `minmax()`μ μ λ΅μ μ¬μ©
repeat() ν¨μλ μΌκ΄λ νΈλ ν¨ν΄μ λ§λλ λ° νμμ μ΄λ©°, `minmax()`λ μ μλ κ²½κ³ λ΄μμ μ μ°ν νΈλ ν¬κΈ° μ‘°μ μ νμ©ν©λλ€. μ΄λ€μ κ²°ν©λ νμ λ§€μ° ν¨μ¨μ μ΄κ³ λ°μμ μΈ λ μ΄μμμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
- `repeat(auto-fit, minmax(min, max))`: λ°μν 그리λλ₯Ό μν ν©κΈ ν¨ν΄μ
λλ€. λΈλΌμ°μ μκ² μ»¨ν
μ΄λ μμ λ§λ λ§νΌμ νΈλμ μμ±νλλ‘ μ§μνλ©°, κ° νΈλμ μ΅μ ν¬κΈ°(`min`)μ μ΅λ ν¬κΈ°(`max`)λ₯Ό κ°μ§λλ€. μ΅λκ°μΌλ‘
frλ¨μλ₯Ό μ¬μ©νλ κ²μ λ¨μ 곡κ°μ κ· λ±νκ² λΆλ°°νλ λ° μμ£Ό μ¬μ©λ©λλ€.
λ©λͺ¨λ¦¬ μν₯: λ§μ μ΄μ λͺ
μμ μΌλ‘ μ μνλ λμ , repeat()λ λΈλΌμ°μ κ° λͺ κ°μ νΈλμ΄ λ§λμ§ κ³μ°νλ λ¬΄κ±°μ΄ μμ
μ μννλλ‘ ν©λλ€. repeat() μμ `minmax()`λ νΈλμ΄ ν©λ¦¬μ μΈ μ ν λ΄μμ 컀μ§κ±°λ μμμ§λλ‘ νμ¬ μ΄λ₯Ό λμ± μΈλ°νκ² μ‘°μ ν©λλ€. μ΄λ λΈλΌμ°μ κ° κ΄λ¦¬ν΄μΌ νλ λͺ
μμ μΈ νΈλ μ μ μλ₯Ό ν¬κ² μ€μ¬ μλΉν λ©λͺ¨λ¦¬ λ° κ³μ° μ μ½μ κ°μ Έμ΅λλ€. λΈλΌμ°μ λ κ° νΈλμ κ°λ³μ μΌλ‘ κ³μ°νλ λμ , μ¬μ© κ°λ₯ν 곡κ°λΉ λ°λ³΅ νΈλ μλ₯Ό ν λ²λ§ κ³μ°νλ©΄ λ©λλ€.
κΈλ‘λ² μ: λ€μν μ§μμ κΈ°μ¬λ₯Ό νμνλ λ΄μ€ μΉμ¬μ΄νΈμ ννμ΄μ§. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));μ μ¬μ©νλ©΄ λ ν° νλ©΄μμλ κΈ°μ¬κ° μ¬λ¬ μ΄λ‘ νμλμ΄ λλΉλ₯Ό μ±μ°κ³ , λ μμ λͺ¨λ°μΌ νλ©΄μμλ λ¨μΌ μ΄λ‘ μμ
λλ€. μ΄ λ¨μΌ CSS κ·μΉμ λ€μν ν΄μλμ νλ©΄ λΉμ¨μ μλ²½νκ² μ μνμ¬, λͺ
μμ μΈ μ΄ μ μλ₯Ό μ΅μνν¨μΌλ‘μ¨ μ±λ₯μ μ΅μ νν©λλ€.
3. `min-content` λ° `max-content`λ₯Ό μ¬μ©ν μ½ν μΈ μΈμ ν¬κΈ° μ‘°μ
λ μ΄μμμ΄ μ½ν
μΈ μ κ³ μ ν¬κΈ°μ μ§μ μΌλ‘ λ§μΆ°μ ΈμΌ ν λ, min-content λ° max-contentλ λ§€μ° μ μ©ν©λλ€. κ·Έλ¬λ κ³μ° λΉμ©μ κ³ λ €ν΄μΌ ν©λλ€.
- λμ μ½ν μΈ μ μ νμ μΌλ‘ μ¬μ©: μ ν μ λͺ©μ΄λ μ€λͺ κ³Ό κ°μ΄ κΈΈμ΄κ° λ§€μ° λ€μνλ©° μ΄ λλΉλ₯Ό κ²°μ ν΄μΌ νλ νΉμ μμκ° μλ κ²½μ°, μ΄λ¬ν ν€μλκ° μ ν©ν©λλ€.
- ν¬κ³ μ μ μΈ κ·Έλ¦¬λμλ μ¬μ© κΈμ§: λμ μΈ λλΉ μ‘°μ μ΄ νμνμ§ μμ μλ°± κ°μ νλͺ©μ΄ μλ 그리λμ `max-content`λ₯Ό μ μ©νλ κ²μ μ±λ₯ λ³λͺ© νμμ΄ λ μ μμ΅λλ€. λΈλΌμ°μ λ λͺ¨λ νλͺ©μ μ½ν μΈ λ₯Ό λΆμν΄μΌ ν©λλ€.
- `auto` λλ `fr`μ ν¨κ» μ¬μ©νμ¬ κ· ν μ‘κΈ°: λ€λ₯Έ λ¨μμ κ²°ν©νμ¬ λ μ μ΄λ λμμ λ§λ€ μ μμ΅λλ€. μλ₯Ό λ€μ΄, `minmax(min-content, 1fr)`μ νΈλμ΄ κ³ μ ν¬κΈ° μ€ κ°μ₯ μμ ν¬κΈ°λ‘ μ€μ΄λ€μ§λ§ μ¬μ© κ°λ₯ν 곡κ°μ μ±μ°λλ‘ νμ₯λ μ μλλ‘ ν©λλ€.
λ©λͺ¨λ¦¬ μν₯: λΈλΌμ°μ λ μ½ν μΈ μ κ³ μ ν¬κΈ°λ₯Ό κ²°μ νκΈ° μν΄ κ³μ°μ μνν΄μΌ ν©λλ€. μ΄ μ½ν μΈ κ° λ³΅μ‘νκ±°λ λ§€μ° ν¬λ©΄ κ³μ° μκ°μ΄ λ μ€λ 걸릴 μ μμ΅λλ€. κ·Έλ¬λ μ΄μ μ μ’ μ’ μ½ν μΈ μ€λ²νλ‘μ°λ λΆνμν 곡백μ λ°©μ§νλ λ κ°λ ₯νκ³ μ§μ μΌλ‘ λ°μμ μΈ λ μ΄μμμ λλ€.
κΈλ‘λ² μ: λ€κ΅μ΄ μ¬μ μΉμ¬μ΄νΈ. μ μ μ΄μ΄ λ§€μ° κΈ΄ λ²μ λ¨μ΄λ ꡬ문μ λκΉ μμ΄ μμ©ν΄μΌ νλ κ²½μ°, ν΄λΉ νΈλμ `max-content`λ₯Ό μ¬μ©νλ κ²μ΄ λ§€μ° ν¨κ³Όμ μΌ μ μμ΅λλ€. λΈλΌμ°μ λ κ°μ₯ κΈ΄ λ¨μ΄μ νμν μ΅λ λλΉλ₯Ό κ³μ°νμ¬, λ μ΄μμμ΄ κ·Έλλ‘ μ μ§λκ³ λͺ¨λ μΈμ΄ μ¬μ©μκ° μ½μ μ μλλ‘ λ³΄μ₯ν©λλ€. μ΄λ κ³ μ λλΉ μ΄μ΄ μ λ°ν μ μλ μλ¦Όμ΄λ μ΄μν μ€ λ°κΏμ λ°©μ§ν©λλ€.
4. `fit-content()`λ₯Ό μ¬μ©ν `auto` ν¬κΈ° μ‘°μ
fit-content() ν¨μλ `auto`μ `max-content` μ¬μ΄μ μ μΆ©μμ μ 곡ν©λλ€. μ¬μ© κ°λ₯ν 곡κ°μ κΈ°μ€μΌλ‘ νΈλ ν¬κΈ°λ₯Ό μ‘°μ νμ§λ§, ν¨μμ μΈμλ‘ μ§μ λ μ΅λ μ νμ΄ μμ΅λλ€.
- `fit-content(limit)`: νΈλμ `minmax(auto, limit)`μ λ°λΌ ν¬κΈ° μ‘°μ λ©λλ€. μ΄λ μ½ν μΈ (`auto`)λ§νΌ λμ§λ§ μ§μ λ `limit`λ³΄λ€ λμ§ μλ€λ κ²μ μλ―Έν©λλ€.
λ©λͺ¨λ¦¬ μν₯: `fit-content()`λ `max-content`λ³΄λ€ ν¨μ¨μ μΌ μ μμ΅λλ€. μλνλ©΄ μ νλ νκ³λ₯Ό λμ νμ¬ λΈλΌμ°μ κ° μ½ν μΈ λ₯Ό κ°λ₯ν μ΅λ ν¬κΈ°κΉμ§ λΆμν νμκ° μλλ‘ νκΈ° λλ¬Έμ λλ€. λ μμΈ‘ κ°λ₯νκ³ μ’ μ’ λ λΉ λ₯Έ κ³μ°μ λλ€.
κΈλ‘λ² μ: λ€μν λ°μ΄ν° ν¬μΈνΈλ₯Ό νμνλ ν μ΄λΈλ‘, μΌλΆ μ΄μ μ½ν μΈ μ μΆ©λΆν λμ΄μΌ νμ§λ§ λ μ΄μμμ μ§λ°°ν΄μλ μ λ©λλ€. μ΄μ `fit-content(200px)`λ₯Ό μ¬μ©νλ©΄ μ½ν μΈ λ₯Ό μ΅λ 200pxκΉμ§ μ±μ°λλ‘ νμ₯λ λ€μ μ±μ₯μ΄ λ©μΆλ―λ‘, ν° νλ©΄μμ κ³Όλνκ² λμ μ΄μ λ°©μ§νκ³ μ μΈκ³ μ¬μ©μ μΈν°νμ΄μ€ μ 체μ κ±Έμ³ κ· ν μ‘ν λ°μ΄ν° ννμ 보μ₯ν©λλ€.
5. λͺ μμ μΌλ‘ ν¬κΈ°κ° μ‘°μ λ νΈλμ μ±λ₯ κ³ λ € μ¬ν
그리λλ κ°λ ₯ν λμ ν¬κΈ° μ‘°μ κΈ°λ₯μ μ 곡νμ§λ§, λλ‘λ νΈλ ν¬κΈ°λ₯Ό λͺ μμ μΌλ‘ μ μνλ κ²μ΄ νμν©λλ€. κ·Έλ¬λ μ΄λ μ±λ₯μ μΌλμ λκ³ μνν΄μΌ ν©λλ€.
- κ³ μ λ¨μ μ΅μν: κ³ μ ν½μ λ¨μμ κ³Όλν μ¬μ©μ νΉν λ·°ν¬νΈ ν¬κΈ°κ° λ³κ²½λ λ μ¬κ³μ° μμ΄ μ μ μνμ§ λͺ»νλ λ μ΄μμμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
- `calc()` νλͺ νκ² μ¬μ©: `calc()`λ 볡μ‘ν κ³μ°μ κ°λ ₯νμ§λ§, νΈλ ν¬κΈ° μ‘°μ λ΄μμ μ§λμΉκ² μ€μ²©λκ±°λ 볡μ‘ν `calc()` ν¨μλ μ²λ¦¬ μ€λ²ν€λλ₯Ό μΆκ°ν μ μμ΅λλ€.
- μλ λ¨μ μ νΈ: κ°λ₯ν κ²½μ°, 컨ν μ΄λμ μ°¨μ λ° νλ©΄ ν¬κΈ°μ λ λ³Έμ§μ μΌλ‘ μ°κ²°λ λ°±λΆμ¨ λλ λ·°ν¬νΈ λ¨μ(`vw`, `vh`)μ κ°μ μλ λ¨μλ₯Ό μ¬μ©νμμμ€.
λ©λͺ¨λ¦¬ μν₯: λΈλΌμ°μ κ° κ³ μ λ¨μ λλ 볡μ‘ν κ³μ°μ λ§λλ©΄, νΉν ν¬κΈ° μ‘°μ μ΄λ²€νΈ μ€μ΄λ μ½ν μΈ κ° λ³κ²½λ λ λ μ΄μμμ λ μμ£Ό μ¬νκ°ν΄μΌ ν μ μμ΅λλ€. μλ λ¨μλ μ μ νκ² μ¬μ©λ λ λ μ΄μμ κ³μ°μ μμ°μ€λ¬μ΄ νλ¦κ³Ό λ μ μ λ ¬λ©λλ€.
6. `grid-auto-rows` λ° `grid-auto-columns`μ μν₯
μ΄λ¬ν μμ±μ λͺ
μμ μΌλ‘ μ μλμ§ μμ 그리λ νΈλ(grid-template-rows λλ grid-template-columnsμ μν΄)μ ν¬κΈ° μ‘°μ μ μ μν©λλ€.
- κΈ°λ³Έ `auto` ν¬κΈ° μ‘°μ : κΈ°λ³Έμ μΌλ‘ μμμ μΌλ‘ μμ±λ νΈλμ `auto`λ₯Ό μ¬μ©νμ¬ ν¬κΈ° μ‘°μ λ©λλ€. μ΄λ μ½ν μΈ λ₯Ό μ‘΄μ€νλ―λ‘ μΌλ°μ μΌλ‘ ν¨μ¨μ μ λλ€.
- μΌκ΄μ±μ μν΄ λͺ
μμ μΌλ‘ μ€μ : λͺ¨λ μμμ μΌλ‘ μμ±λ νΈλμ μΌκ΄λ ν¬κΈ°(μ: λͺ¨λ 100px λμ΄)κ° νμν κ²½μ°
grid-auto-rows: 100px;λ₯Ό μ€μ ν μ μμ΅λλ€.
λ©λͺ¨λ¦¬ μν₯: `grid-auto-rows` λλ `grid-auto-columns`μ λν΄ λͺ μμ μΈ ν¬κΈ°λ₯Ό μ€μ νλ κ²μ, νμν ν¬κΈ°λ₯Ό μκ³ λ§μ μμμ μΌλ‘ μμ±λ νΈλμ κ±Έμ³ μΌκ΄λ κ²½μ°, κΈ°λ³Έκ°μΌλ‘ `auto`λ₯Ό μ¬μ©νλ κ²λ³΄λ€ μ’ μ’ λ ν¨μ¨μ μ λλ€. λΈλΌμ°μ λ μλ‘ μμ±λ κ° νΈλμ μ½ν μΈ λ₯Ό κ²μ¬ν νμ μμ΄ μ΄ μ¬μ μ μλ ν¬κΈ°λ₯Ό μ μ©ν μ μμ΅λλ€. κ·Έλ¬λ μ½ν μΈ κ° μ€μ λ‘ λ€μνκ³ `auto`κ° μΆ©λΆν κ²½μ°, μ΄λ₯Ό μ¬μ©νλ κ²μ΄ λ κ°λ¨νκ³ λΆνμν κ³ μ ν¬κΈ° μ‘°μ μ λ°©μ§ν μ μμ΅λλ€.
κΈλ‘λ² μ: λ€μν μμ ―μ νμνλ λμ보λ μ ν리μΌμ΄μ
μμ κ° μμ ―μ κ°λ
μ±μ 보μ₯νκΈ° μν μ΅μ λμ΄κ° νμν κ²½μ°, grid-auto-rows: 150px;λ₯Ό μ€μ νλ©΄ λͺ¨λ μμμ μΌλ‘ μμ±λ νμ΄ μΌκ΄λκ³ μ¬μ© κ°λ₯ν λμ΄λ₯Ό μ μ§νμ¬ νμ΄ λ무 μμμ§λ κ²μ λ°©μ§νκ³ μ μΈκ³ λ€μν λμ보λ μ λ°μ κ±Έμ³ μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν¬ μ μμ΅λλ€.
7. λ―Έλμ΄ μΏΌλ¦¬ λ° λ°μν νΈλ ν¬κΈ° μ‘°μ
λ―Έλμ΄ μΏΌλ¦¬λ λ°μν λμμΈμ κΈ°λ³Έμ λλ€. λ―Έλμ΄ μΏΌλ¦¬ λ΄μμ 그리λ νΈλ ν¬κΈ° μ‘°μ μ ꡬμ±νλ λ°©μμ μ±λ₯μ ν° μν₯μ λ―ΈμΉ©λλ€.
- μ€λ¨μ μ΅μ ν: μμμ νλ©΄ ν¬κΈ° λμ λ μ΄μμ μꡬ μ¬νμ μ€μ λ‘ λ°μνλ μ€λ¨μ μ μ ννμμμ€.
- λ€μν μ€λ¨μ μμ νΈλ μ μ λ¨μν: λͺ¨λ λ―Έλμ΄ μΏΌλ¦¬λ‘ λ³΅μ‘ν 그리λ ꡬ쑰λ₯Ό κΈκ²©νκ² λ³κ²½νμ§ λ§μμμ€. μ μ§μ μΈ λ³κ²½μ λͺ©νλ‘ νμμμ€.
- `repeat()` λ΄μμ `auto-fit` λ° `auto-fill` νμ©: μ΄λ κ° μ€λ¨μ μμ μλμΌλ‘ `grid-template-columns`λ₯Ό λ³κ²½νλ κ²λ³΄λ€ μ’ μ’ λ ν¨μ¨μ μ λλ€.
λ©λͺ¨λ¦¬ μν₯: λ―Έλμ΄ μΏΌλ¦¬κ° νΈλ¦¬κ±°λλ©΄ λΈλΌμ°μ λ λ μ΄μμ μμ±μ ν¬ν¨ν μ€νμΌμ μ¬νκ°ν΄μΌ ν©λλ€. 그리λ μ μκ° μ§λμΉκ² 볡μ‘νκ±°λ κ° μ€λ¨μ μμ ν¬κ² λ³κ²½λλ©΄ μ΄ μ¬νκ°λ λΉμ©μ΄ λ§μ΄ λ€ μ μμ΅λλ€. repeat() λ° `minmax()`λ‘ μ’
μ’
λ¬μ±ν μ μλ λ¨μνκ³ μ μ§μ μΈ λ³κ²½μ λ λΉ λ₯Έ μ¬κ³μ°μΌλ‘ μ΄μ΄μ§λλ€.
κΈλ‘λ² μ: μ μΈκ³ 컨νΌλ°μ€ μΉμ¬μ΄νΈμ μΌμ νμ΄μ§. λ μ΄μμμ λ°μ€ν¬ν±μμ μ¬λ¬ μ΄ λ³΄κΈ°μμ λͺ¨λ°μΌ μ νμ λ¨μΌ μ€ν¬λ‘€ κ°λ₯ν μ΄λ‘ μ μν΄μΌ ν©λλ€. κ° ν¬κΈ°μ λν λͺ
μμ μΈ μ΄μ μ μνλ λμ , grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));μ κ°κ²©μ μ‘°μ νκ±°λ κΈκΌ΄ ν¬κΈ°λ₯Ό μ‘°μ νλ λ―Έλμ΄ μΏΌλ¦¬ λ΄μμ μ¬μ©νλ©΄, ν¬κ² λ€λ₯Έ 그리λ μ μκ° νμ μμ΄ μ νμ μ°μνκ² μ²λ¦¬νμ¬ λͺ¨λ μ₯μΉμμ μ±λ₯μ 보μ₯ν©λλ€.
8. μ±λ₯ νλ‘νμΌλ§ λ° λλ²κΉ λꡬ
μ±λ₯μ μ§μ μΌλ‘ μ΄ν΄νκ³ μ΅μ ννλ κ°μ₯ μ’μ λ°©λ²μ μΈ‘μ νλ κ²μ λλ€.
- λΈλΌμ°μ κ°λ°μ λꡬ: Chrome DevTools, Firefox Developer Edition λ±μ νλ₯ν μ±λ₯ νλ‘νμΌλ§ λꡬλ₯Ό μ 곡ν©λλ€. λ€μμ μ°ΎμΌμμμ€.
- λ μ΄μμ/리νλ‘μ° νμ΄λ°: μ΄λ€ CSS μμ±μ΄ λ μ΄μμ μ¬κ³μ°μ μ λ°νλμ§ μλ³ν©λλ€.
- λ©λͺ¨λ¦¬ μ€λ μ·: μκ° κ²½κ³Όμ λ°λ₯Έ λ©λͺ¨λ¦¬ μ¬μ©λμ μΆμ νμ¬ λμ λλ μμμΉ λͺ»ν μ¦κ°λ₯Ό κ°μ§ν©λλ€.
- λ λλ§ μ±λ₯: λΈλΌμ°μ κ° κ·Έλ¦¬λ λ μ΄μμμ μΌλ§λ 빨리 λ λλ§νκ³ μ λ°μ΄νΈνλμ§ κ΄μ°°ν©λλ€.
- `content-visibility` λ° `contain` μμ± μ¬μ©: CSS 그리λ νΈλ ν¬κΈ° μ‘°μ μ μ§μ μ μΌλ‘ κ΄λ ¨λμ§λ μμ§λ§, μ΄λ¬ν CSS μμ±μ νλ©΄ λ° μ½ν μΈ μ λ λλ§μ 건λλ°λλ‘ λΈλΌμ°μ μ μ§μνκ±°λ μ¬κ³μ° λ²μλ₯Ό μ€μ΄κΈ° μν΄ λ μ΄μμ λ³κ²½μ νΉμ μμ λ΄μ ν¬ν¨νλλ‘ μ§μν¨μΌλ‘μ¨ λ λλ§ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
λ©λͺ¨λ¦¬ μν₯: νλ‘νμΌλ§μ CSS 그리λ ꡬνμ νΉμ μμμ μλ³νλ λ° λμμ΄ λ©λλ€. μ΄λ κ³Όλν λ©λͺ¨λ¦¬λ₯Ό μλΉνκ±°λ λλ¦° λ μ΄μμ κ³μ°μΌλ‘ μ΄μ΄μ§λλ€. μ΄λ¬ν νΉμ λ¬Έμ λ₯Ό ν΄κ²°νλ κ²μ μΌλ°μ μΈ μ΅μ νλ₯Ό μ μ©νλ κ²λ³΄λ€ ν¨μ¬ ν¨κ³Όμ μ λλ€.
κΈλ‘λ² μ: λ€μν κ΅κ°μ νμ₯ μμμ΄ μ¬μ©νλ ν¬κ³ λνν μ§λ μ ν리μΌμ΄μ . κ°λ°μλ λΈλΌμ°μ κ°λ°μ λꡬμ μ±λ₯ νμ μ¬μ©νμ¬ μ 보 νμ μ 볡μ‘ν 그리λ κ΅¬μ‘°κ° μλΉν 리νλ‘μ°λ₯Ό μ λ°νλ€λ κ²μ μλ³ν μ μμ΅λλ€. νλ‘νμΌλ§μ ν΅ν΄ κ³ μ ν½μ κ°μ μ¬μ©νλ λμ `fr` λ¨μλ₯Ό μ¬μ©νμ¬ νμ μ½ν μΈ μμμ `minmax()`λ₯Ό μ¬μ©νλ©΄ λ§μ νμ μ΄ λμμ νμ±νλ λ λ μ΄μμ κ³μ° μκ°κ³Ό λ©λͺ¨λ¦¬ μλΉκ° ν¬κ² μ€μ΄λ λ€λ κ²μ λ°κ²¬ν μ μμ΅λλ€.
κ³ κΈ κΈ°λ² λ° κ³ λ € μ¬ν
1. 그리λ μμ΄ν λ 그리λ 컨ν μ΄λ ν¬κΈ° μ‘°μ
그리λ 컨ν
μ΄λμ ν¬κΈ° μ‘°μ κ³Ό κ°λ³ 그리λ μμ΄ν
μ ν¬κΈ° μ‘°μ μ ꡬλΆνλ κ²μ΄ μ€μν©λλ€. νΈλ ν¬κΈ° μ‘°μ μ΅μ νλ μ£Όλ‘ μ»¨ν
μ΄λμ grid-template-columns, grid-template-rows, grid-auto-columns λ° grid-auto-rows μμ±μ μ°Έμ‘°ν©λλ€. κ·Έλ¬λ 그리λ μμ΄ν
μ width, height, min-width, max-width, min-height λ° max-height μμ±λ μν μ νλ©° `auto` λ° `max-content` νΈλ ν¬κΈ°μ λν κ³μ°μ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
λ©λͺ¨λ¦¬ μν₯: 그리λ μμ΄ν μ μ½ν μΈ μ `max-content` ν¬κΈ°λ³΄λ€ μμ λͺ μμ μΌλ‘ μ€μ λ `max-width`κ° μλ κ²½μ°, λΈλΌμ°μ λ `max-width`λ₯Ό μ‘΄μ€ν©λλ€. μ΄λ νκ³μ μΌμ° λλ¬νλ©΄ κ³μ°μ μΌλ‘ λΆλ΄μ€λ¬μ΄ `max-content` κ³μ°μ λ°©μ§νλ λ° λμμ΄ λ μ μμ΅λλ€. λ°λλ‘, 그리λ μμ΄ν μ λΆνμνκ² ν° `min-width`λ νΈλμ νμ μ΄μμΌλ‘ ν¬κ² λ§λ€ μ μμΌλ©° μ 체 λ μ΄μμ ν¨μ¨μ±μ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
2. `subgrid` μμ± λ° μ±λ₯ μν₯
μμ§ μλμ μΌλ‘ μλ‘μ΄ κΈ°λ₯μ΄λ©° λΈλΌμ°μ μ§μμ΄ λ€μνμ§λ§, `subgrid`λ 그리λ μμ΄ν μ΄ λΆλͺ¨ 그리λμμ νΈλ ν¬κΈ° μ‘°μ μ μμν μ μλλ‘ ν©λλ€. μ΄λ 볡μ‘ν μ€μ²©μ λ¨μνν μ μμ΅λλ€.
λ©λͺ¨λ¦¬ μν₯: `subgrid`λ μ€μ²©λ 그리λ λ΄μμ μ€λ³΅λ νΈλ μ μμ νμμ±μ μ€μΌ μ μμ΅λλ€. μμν¨μΌλ‘μ¨ λΈλΌμ°μ λ νμ 그리λμ λν΄ λ λ 립μ μΈ κ³μ°μ μνν μ μμ΅λλ€. κ·Έλ¬λ `subgrid` μ체μ κΈ°λ³Έ λ©μ»€λμ¦μ μ체 κ³μ° μΈνΈλ₯Ό ν¬ν¨ν μ μμΌλ―λ‘, μ±λ₯ μ΄μ μ 컨ν μ€νΈμ λ°λΌ λ€λ₯΄λ©° νλ‘νμΌλ§ν΄μΌ ν©λλ€.
κΈλ‘λ² μ: μ¬λ¬ μ ν리μΌμ΄μ μμ 볡μ‘ν λ°μ΄ν° ν μ΄λΈμ΄ μ¬μ©λ μ μλ λμμΈ μμ€ν κ΅¬μ± μμ λΌμ΄λΈλ¬λ¦¬. ν μ΄λΈμ λ©μΈ ν μ΄λΈ μ΄κ³Ό μλ²½νκ² μ λ ¬λμ΄μΌ νλ μ€μ²© μμκ° μλ κ²½μ°, μ΄λ¬ν μ€μ²© μμμ `subgrid`λ₯Ό μ¬μ©νλ©΄ ν μ΄λΈμ μ΄ κ΅¬μ‘°λ₯Ό μμν μ μμ΅λλ€. μ΄λ λΈλΌμ°μ κ° κ° μ€μ²© κ΅¬μ± μμμ λν΄ μ²μλΆν° μ΄ ν¬κΈ°λ₯Ό λ€μ κ³μ°ν νμκ° μμΌλ―λ‘ λ κ°λ¨ν CSSμ μ μ¬μ μΌλ‘ λ ν¨μ¨μ μΈ λ μ΄μμ κ³μ°μΌλ‘ μ΄μ΄μ§λλ€.
3. λΈλΌμ°μ λ λλ§ μμ§ λ° μ±λ₯
λ€μν λΈλΌμ°μ λ λλ§ μμ§(Blink, Gecko, WebKit)μ CSS 그리λμ λν ꡬν λ° μ΅μ νκ° λ€λ₯Ό μ μμ΅λλ€. CSS μ¬μμ μΌκ΄μ±μ λͺ©νλ‘ νμ§λ§, μ±λ₯μ λ―Έλ¬ν μ°¨μ΄κ° μ‘΄μ¬ν μ μμ΅λλ€.
λ©λͺ¨λ¦¬ μν₯: μ£Όμ λΈλΌμ°μ μ λ°μ κ±Έμ³ μ±λ₯μ΄ μ€μν 그리λ λ μ΄μμμ ν μ€νΈνλ κ²μ΄ μ’μ΅λλ€. ν μμ§μμ λ§€μ° μ΅μ νλ κ²μ΄ λ€λ₯Έ μμ§μμλ μ½κ° λ μ΅μ νλ μ μμ΅λλ€. μ΄λ¬ν μ°¨μ΄μ μ μ΄ν΄νλ κ²(νΉμ λΈλΌμ°μ κ° λ μ§λ°°μ μΈ νΉμ μ§μμ λμμΌλ‘ νλ κ²½μ°)μ μ μ΅ν μ μμ΅λλ€.
κΈλ‘λ² μ: λ€μν μ¬μ©μ μμ₯μμ μ€μκ°μΌλ‘ μ±λ₯μ΄ λ°μ΄λμΌ νλ κΈμ΅ κ±°λ νλ«νΌ. κ°λ°μλ λΈλΌμ°μ κ°λ°μ λꡬμ μ±λ₯ νμ ν΅ν΄ νΉμ 볡μ‘ν 그리λ ꡬμ±μ΄ Safariμμ λμ λκ² λ리λ€λ κ²μ λ°κ²¬ν μ μμ΅λλ€. μ΄ ν΅μ°°λ ₯μ ν΄λΉ νΉμ μλ리μ€μ λν νΈλ ν¬κΈ° μ‘°μ μ μ¬νκ°νλλ‘ μ λν κ²μ λλ€. μλ§λ `repeat()` ν¨ν΄μ΄λ `fr` λ¨μμ λ μ μ€ν μ¬μ©μ μ ννμ¬ λͺ¨λ μ¬μ©μλ₯Ό μν μΌκ΄λ λΉ λ₯Έ κ²½νμ 보μ₯ν κ²μ λλ€.
κ²°λ‘ : ν¨μ¨μ μ΄κ³ μ±λ₯μ΄ λ°μ΄λ 그리λ λ μ΄μμμ ν₯νμ¬
CSS 그리λ λ μ΄μμμ μΉ κ°λ°μμκ² νμ΄μ§ ꡬ쑰μ λν λΉκ΅ν μ μλ μ μ΄λ₯Ό μ 곡νλ νμ μ μΈ κΈ°μ μ λλ€. κ·Έλ¬λ ν° νμλ ν¨μ¨μ μΈ κ΅¬νμ μ± μμ΄ λ°λ¦ λλ€. `fr` λ¨μμ νλΆν° `min-content` λ° `max-content`μ μ½ν μΈ μΈμμ μ΄λ₯΄κΈ°κΉμ§ νΈλ ν¬κΈ° μ‘°μ μ λ―Έλ¬ν μ°¨μ΄λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨, κ°λ°μλ μκ°μ μΌλ‘ λ©μ§ λΏλ§ μλλΌ μ±λ₯λ λ°μ΄λ λ μ΄μμμ λ§λ€ μ μμ΅λλ€.
CSS 그리λ νΈλ ν¬κΈ° μ‘°μ μ΅μ νλ₯Ό μν μ£Όμ μμ μ λ€μκ³Ό κ°μ΅λλ€.
- λ¨μμ±μ μ°μ μνκ³ λΆνμν 볡μ‘μ±μ νΌνμμμ€ κ·Έλ¦¬λ μ μμμ.
- `repeat()` ν¨μμ `minmax()`λ₯Ό νμ©νμ¬ κ°λ ₯νκ³ ν¨μ¨μ μΈ λ°μν λ μ΄μμμ λ§λμμμ€.
- μ½ν μΈ μΈμ ν¬κΈ° μ‘°μ (`min-content`, `max-content`, `auto`)μ μ λ΅μ μΌλ‘ μ¬μ©νμ¬ μ μ¬μ μΈ κ³μ° λΉμ©μ μ΄ν΄νμμμ€.
- λ―Έλμ΄ μΏΌλ¦¬ μ€λ¨μ λ° CSS κ·μΉμ μ΅μ ννμ¬ μννκ³ ν¨μ¨μ μΈ μ¬κ³μ°μ μννμμμ€.
- νμ λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ λ μ΄μμμ νλ‘νμΌλ§νκ³ ν μ€νΈνμ¬ μ±λ₯ λ³λͺ© νμμ μλ³νκ³ ν΄κ²°νμμμ€.
μ΄λ¬ν μμΉμ μ±νν¨μΌλ‘μ¨, κ·νλ CSS 그리λ ꡬνμ΄ μΉ μ ν리μΌμ΄μ μ μ λ°μ μΈ μ±λ₯μ κΈμ μ μΌλ‘ κΈ°μ¬νμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν λΉ λ₯΄κ³ λ°μμ μ΄λ©° λ©λͺ¨λ¦¬ ν¨μ¨μ μΈ κ²½νμ μ 곡νλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ±λ₯ μ΅μ νλ₯Ό μν μ§μμ μΈ μΆκ΅¬λ λ¨μν κΈ°μ μ μꡬ μ¬νμ΄ μλλΌ κ²½μμ΄ μΉμ΄ν μ€λλ μ λμ§νΈ μΈκ³μμ μ¬μ©μ λ§μ‘±μ λν μ½μμ λλ€.