CSS Gridμ νμ μ μΈ κΈ°λ₯μΈ μμμ λͺ λͺ λ λΌμΈμ κ°λ ₯ν¨μ νμν΄ λ³΄μΈμ. 그리λ λΌμΈ μ΄λ¦μ μλμΌλ‘ μμ±νμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν 볡μ‘ν λ μ΄μμμ λ¨μνν©λλ€.
CSS Gridμ μ μ¬λ ₯ λ°ν: λμ λ μ΄μμμ μν μμμ λͺ λͺ λ λΌμΈ λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ μΉ λμμΈ νκ²½μμ CSS Gridλ κ²¬κ³ νκ³ μ μ°ν λ μ΄μμμ λ§λλ μ΄μμΌλ‘ μ리 μ‘μμ΅λλ€. λͺ μμ 그리λ μ μλ μΈλ°ν μ μ΄λ₯Ό μ 곡νμ§λ§, CSS Gridμ μμμ λͺ λͺ λ λΌμΈ(implicit named lines)μ κ°λ ₯ν¨μ μ’ μ’ μΆ©λΆν νμ©λμ§ λͺ»ν©λλ€. μ΄ κΈ°λ₯μ 그리λ λΌμΈ μ΄λ¦μ μλ μμ±μ κ°λ₯νκ² νμ¬, νΉν λ€μν μꡬμ νλ©΄ ν¬κΈ°λ₯Ό κ°μ§ μ μΈκ³ μ¬μ©μλ₯Ό μν 볡μ‘νκ³ λμ μΈ λ μ΄μμ κ°λ°μ ν¬κ² κ°μνν μ μμ΅λλ€.
μ΄ μ’ ν© κ°μ΄λλ CSS Gridμ μμμ λͺ λͺ λ λΌμΈ κ°λ μ μ¬λ μκ² λ€λ£° κ²μ λλ€. μ΄ κΈ°λ₯μ΄ μ΄λ»κ² μλνλμ§, κ·Έ μ΄μ μ 무μμΈμ§, μ€μ μ¬μ© μ¬λ‘λ μ΄λ€ κ²μ΄ μλμ§, κ·Έλ¦¬κ³ νλ μΉ κ°λ°μ μν΄ μ΄λ₯Ό ν¨κ³Όμ μΌλ‘ νμ©νλ λ°©λ²μ νꡬν©λλ€. κΈ°λ³Έ μ리λΆν° κ³ κΈ κΈ°μ κΉμ§ λͺ¨λ κ²μ λ€λ£¨μ΄, μ¬λ¬λΆμ΄ μ΄ κ°λ ₯ν λꡬλ₯Ό νμ©νμ¬ λ ν¨μ¨μ μ΄κ³ μ μ§λ³΄μνκΈ° μ¬μ΄ μ€νμΌμνΈλ₯Ό λ§λ€ μ μλλ‘ λ³΄μ₯ν κ²μ λλ€.
CSS Gridμ κΈ°λ³Έ μ리 μ΄ν΄νκΈ°
μμμ λͺ λͺ λ λΌμΈμ λν΄ μμ보기 μ μ, CSS Gridμ ν΅μ¬ κ°λ μ νμ€ν μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. CSS Grid λ μ΄μμμ μΉμ μν 2μ°¨μ λ μ΄μμ μμ€ν μ λλ€. μ΄λ₯Ό ν΅ν΄ μ½ν μΈ λ₯Ό νκ³Ό μ΄μ λ°°μΉν μ μμΌλ©°, 볡μ‘ν λ μ΄μμμ κ·Έ μ΄λ λλ³΄λ€ κ°λ¨νκ² λ§λ€ μ μλ λ§μ κΈ°λ₯μ κ°μΆκ³ μμ΅λλ€. ν΅μ¬ κ°λ μ λ€μκ³Ό κ°μ΅λλ€:
- 그리λ 컨ν
μ΄λ(Grid Container):
display: grid;λλdisplay: inline-grid;κ° μ μ©λ μμμ λλ€. μ΄ μ»¨ν μ΄λλ μ§κ³ μμ μμμ λν μλ‘μ΄ κ·Έλ¦¬λ ν¬λ§·ν 컨ν μ€νΈλ₯Ό μ€μ ν©λλ€. - 그리λ μμ΄ν (Grid Items): 그리λ 컨ν μ΄λμ μ§κ³ μμ μμμ λλ€. μ΄ μμ΄ν λ€μ 그리λ μ λ΄μ λ°°μΉλ©λλ€.
- 그리λ λΌμΈ(Grid Lines): 그리λμ ꡬ쑰λ₯Ό μ΄λ£¨λ μν λ° μμ§ κ΅¬λΆμ μ λλ€. μ΄ λΌμΈλ€μ λ²νΈκ° 맀겨μ§κ±°λ μ΄λ¦μ΄ μ§μ λ μ μμ΅λλ€.
- 그리λ νΈλ(Grid Tracks): λ μΈμ ν 그리λ λΌμΈ μ¬μ΄μ 곡κ°μΌλ‘, μ΄ νΈλ λλ ν νΈλμ΄ λ μ μμ΅λλ€.
- 그리λ μ (Grid Cells): νκ³Ό μ΄μ κ΅μ°¨λ‘μ μν΄ νμ±λλ 그리λμ κ°μ₯ μμ λ¨μμ λλ€.
- 그리λ μμ(Grid Areas): νλ μ΄μμ 그리λ μ λ‘ κ΅¬μ±λ μ μλ μ§μ¬κ°ν μμμΌλ‘, μ½ν μΈ λΈλ‘μ μ΄λ¦μ μ§μ νκ³ λ°°μΉν μ μμ΅λλ€.
μΌλ°μ μΌλ‘ 그리λλ₯Ό μ μν λ, μ°λ¦¬λ μλμΌλ‘ μ΄κ³Ό ν νΈλμ μ€μ νκ³ μ’
μ’
grid-template-areasλ₯Ό μ¬μ©νκ±°λ grid-template-columns λ° grid-template-rows λ΄μμ λΌμΈ μ΄λ¦μ μ μνμ¬ λͺ
μμ μΌλ‘ λΌμΈ μ΄λ¦μ μ§μ ν©λλ€. μλ₯Ό λ€μ΄:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
μ΄ μμ μμλ 'header', 'sidebar', 'main', 'aside', 'footer'μ κ°μ μμμ λͺ μμ μΌλ‘ λͺ λͺ νμ΅λλ€. μ΄ μ κ·Ό λ°©μμ μ μ λ μ΄μμμ κ°λ ₯νμ§λ§, λ§€μ° λμ μ΄κ±°λ μλμΌλ‘ μμ±λλ 그리λμ κ²½μ° μ₯ν©ν΄μ§κ³ κ΄λ¦¬νκΈ° μ΄λ €μμ§ μ μμ΅λλ€.
μμμ λͺ λͺ λ λΌμΈ μκ°
CSS Gridμ μμμ 그리λλ μ½ν μΈ κ° λͺ μμ μΌλ‘ μ μλ 그리λ νΈλ μΈλΆμ λ°°μΉλ λ μλμΌλ‘ μμ±λλ νκ³Ό μ΄μ μλ―Έν©λλ€. μλ₯Ό λ€μ΄, 3κ°μ μ΄μ΄ μλ 그리λλ₯Ό μ μνμ§λ§ λ€ λ²μ§Έ μ΄μ νλͺ©μ λ°°μΉνλ €κ³ νλ©΄ μμμ μ΄μ΄ μμ±λ©λλ€.
μμμ λͺ λͺ λ λΌμΈμ μ΄ κ°λ μ ν λ¨κ³ λ λ°μ μν΅λλ€. λΈλΌμ°μ κ° κ°λ¨ν λͺ λͺ κ·μΉμ λ°λΌ μμμ μΌλ‘ μμ±λ μ΄λ¬ν 그리λ λΌμΈμ λν μ΄λ¦μ μλμΌλ‘ μμ±νλλ‘ νμ©ν©λλ€. μ΄λ κ°λ₯ν λͺ¨λ μ΄μ΄λ νμ 미리 μ μνκ³ μΆμ§ μκ±°λ, 그리λ κ΅¬μ‘°κ° μ½ν μΈ μ λ°λΌ λμ μΌλ‘ λ³κ²½λ μ μμ λ νΉν μ μ©ν©λλ€.
μμμ λͺ λͺ λ°©μ
λΈλΌμ°μ λ λ²νΈκ° λ§€κ²¨μ§ μνμ€λ₯Ό μ¬μ©νμ¬ μμμ 그리λ λΌμΈμ μ΄λ¦μ μλμΌλ‘ μ§μ ν©λλ€. λͺ μμ μΌλ‘ μ μλ 그리λ λΌμΈμ λμ΄μλ νλͺ©μ λ°°μΉνλ©΄ 그리λ μμ€ν μ μ λΌμΈμ μμ±ν©λλ€. μ΄ μλ‘μ΄ λΌμΈλ€μ μλμΌλ‘ λ€μκ³Ό κ°μ΄ λͺ λͺ λ©λλ€:
- μμμ μ΄μ κ²½μ°: μ΄λ¦μ κ° μμμ νΈλμ΄ μμ±λ λλ§λ€
column-startμcolumn-endλ₯Ό λ²κ°μ κ°λ©°[column-start] 1,[column-end] 2,[column-start] 3,[column-end] 4λ±μΌλ‘ μμ±λ©λλ€. - μμμ νμ κ²½μ°: λ§μ°¬κ°μ§λ‘, κ° μμμ νΈλμ λν΄
row-startμrow-endλ₯Ό λ²κ°μ κ°λ©°[row-start] 1,[row-end] 2,[row-start] 3,[row-end] 4λ±μΌλ‘ μ΄λ¦μ΄ μμ±λ©λλ€.
μ΄κ²λ€μ λͺ μμ μΌλ‘ μ μλ μ΄λ¦μ΄ μλλΌ μμ±λ μ΄λ¦μ΄λΌλ μ μ μ μνλ κ²μ΄ μ€μν©λλ€. μ΄λ€μ μμΈ‘ κ°λ₯ν ν¨ν΄μ λ°λ₯΄λ―λ‘, μ¬μ μ μ μΈνμ§ μμλλΌλ νμν κ²½μ° νλ‘κ·Έλλ° λ°©μμ΄λ CSSμμ μ°Έμ‘°ν μ μμ΅λλ€.
`grid-auto-flow`μ μν
μμμ νΈλμ λμμ grid-auto-flow μμ±μ μν΄ ν¬κ² μν₯μ λ°μ΅λλ€. κΈ°λ³Έκ°μΈ rowλ‘ μ€μ νλ©΄ μ νλͺ©μ΄ λ€μ μ¬μ© κ°λ₯ν νμ λ°°μΉλ©λλ€. columnμΌλ‘ μ€μ νλ©΄ μ νλͺ©μ μ νμ λ§λ€κΈ° μ μ μ΄μ λ°λΌ μλλ‘ νλ¦
λλ€.
μ€μν μ μ grid-auto-flowκ° denseλ‘ μ€μ λλ©΄, μκ³ λ¦¬μ¦μ΄ μμ νλͺ©μ λΉ κ³΅κ°μ λ°°μΉνμ¬ κ·Έλ¦¬λμ ꡬλ©μ μ±μ°λ €κ³ μλνλ€λ κ²μ
λλ€. μ΄λ‘ μΈν΄ λΈλΌμ°μ κ° λ°°μΉ λ‘μ§μ μμ©νκΈ° μν΄ λ λ§μ μμμ νΈλμ μμ±ν΄μΌ ν μ μμΌλ―λ‘ λ 볡μ‘ν μμμ 그리λ λΌμΈ μμ±μ΄ λ°μν μ μμ΅λλ€.
μμμ λͺ λͺ λ λΌμΈ μ¬μ©μ μ΄μ
CSS Grid λ μ΄μμμμ μμμ λͺ λͺ λ λΌμΈμ μ¬μ©νλ©΄ νΉν μ μ°μ±κ³Ό νμ₯μ±μ΄ μꡬλλ κΈλ‘λ² νλ‘μ νΈμ λν΄ λͺ κ°μ§ κ°λ ₯ν μ΄μ μ μ 곡ν©λλ€:
1. λμ μ½ν μΈ λ₯Ό μν κ°λ° λ¨μν
μλμ΄λ μμκ° λ€λ₯Ό μ μλ μ½ν
μΈ λ₯Ό λ€λ£° λ, κ°λ₯ν λͺ¨λ 그리λ λΌμΈμ΄λ μμμ λͺ
μμ μΌλ‘ μ μνλ κ²μ μ§λ£¨νκ³ μ€λ₯κ° λ°μνκΈ° μ½μ΅λλ€. μμμ λͺ
λͺ
λ λΌμΈμ μ¬μ©νλ©΄ 그리λκ° μ½ν
μΈ μ λ μ κΈ°μ μΌλ‘ μ μν μ μμ΅λλ€. μλ₯Ό λ€μ΄, μΆμ² κΈ°μ¬μ μκ° λ§€μΌ λ°λλ λΈλ‘κ·Έ λ μ΄μμμ΄ μ΄ κΈ°λ₯μ μ΄μ μ λ릴 μ μμ΅λλ€. grid-template-areasλ₯Ό κ³μ μ
λ°μ΄νΈνλ λμ , 그리λκ° μλμΌλ‘ μ νλͺ©μ μμ©ν μ μμ΅λλ€.
μ ν λͺ©λ‘ νμ΄μ§λ₯Ό μκ°ν΄ 보μΈμ. ν νμ νμλλ μ ν μκ° νλ©΄ ν¬κΈ°λ μ¬μ©μ μ νΈλμ λ°λΌ λ¬λΌμ§ μ μλ κ²½μ°, μμμ λͺ λͺ μ μ¬μ©νλ©΄ λμ μΌλ‘ μμ±λ μ΄λ¬ν μ΄μ μ°Έμ‘°νλ λ°©λ²μ΄ λ¨μνλ©λλ€. μ΄λ μ ν ꡬμκ³Ό λμ€νλ μ΄ μꡬ μ¬νμ΄ μ§μλ§λ€ ν¬κ² λ€λ₯Ό μ μλ κ΅μ μ μμκ±°λ μ¬μ΄νΈμ λ§€μ° μ μ©ν©λλ€.
2. μ μ§λ³΄μμ± λ° κ°λ μ± ν₯μ
λͺ¨λ 그리λ λΌμΈμ λͺ μμ μΌλ‘ λͺ λͺ νλ©΄ CSSκ° λ³΅μ‘ν΄μ Έ μ½κ³ μ μ§λ³΄μνκΈ°κ° λ μ΄λ €μμ§ μ μμ΅λλ€. μμμ λͺ λͺ μ μ₯ν©ν μ μμ νμμ±μ μ€μ¬μ€λλ€. 그리λ ꡬ쑰λ ν΅μ¬μ μΈ λͺ μμ λΌμΈ μΈνΈλ‘ μ μλ μ μμΌλ©°, λλ¨Έμ§λ μμμ μΌλ‘ μ²λ¦¬λμ΄ λ κΉ¨λνκ³ κ°κ²°ν μ€νμΌμνΈλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ μ μΈκ³ κ°λ°μλ€μ΄ μ½λλ² μ΄μ€λ₯Ό λ μ½κ² μ΄ν΄νκ³ κΈ°μ¬ν μ μκ² νλ―λ‘ κΈλ‘λ²ν μ΄μ μ λλ€.
3. μ μ°μ± λ° λ°μμ± μ¦λ
μμμ λͺ λͺ λ λΌμΈμ λ νλ ₯μ μ΄κ³ λ°μμ±μ΄ λ°μ΄λ λμμΈμ ꡬμΆνλ λ° κΈ°μ¬ν©λλ€. μ½ν μΈ κ° μ¬λ°°μΉλκ±°λ νλ©΄ ν¬κΈ°κ° λ³κ²½λ¨μ λ°λΌ 그리λλ νμμ λ°λΌ μ λΌμΈμ μμ±ν μ μμ΅λλ€. μ΄λ κΈλ‘λ² μ¬μ©μ κΈ°λ°μ΄ λ§μ£Όνλ λ€μν μ₯μΉμ νλ©΄ ν΄μλμ μ μνλ λ° λ§€μ° μ€μν©λλ€. μλ₯Ό λ€μ΄, λν λ°μ€ν¬ν± λͺ¨λν°μμ μλνλ λμμΈμ΄ λ μμ νλΈλ¦Ώμμλ μ¬λ¬ μμμ μ΄μ μμ±ν΄μΌ ν μ μμΌλ©°, μμμ λͺ λͺ μ μ΄λ¬ν μ νμ λ λΆλλ½κ² λ§λλλ€.
4. 보μΌλ¬νλ μ΄νΈ μ½λ κ°μ
λΈλΌμ°μ κ° νΉμ 그리λ λΌμΈμ λͺ λͺ μ μ²λ¦¬νκ² ν¨μΌλ‘μ¨, μμ±νκ³ μ μ§λ³΄μν΄μΌ νλ 보μΌλ¬νλ μ΄νΈ μ½λμ μμ μ€μΌ μ μμ΅λλ€. μ΄λ κ°λ°μκ° μ¬μ©μ μΈν°νμ΄μ€ λ° κ²½νμ λ μ€μν μΈ‘λ©΄μ μ§μ€ν μ μλ μκ°μ νλ³΄ν΄ μ€λλ€.
μ€μ μ¬μ© μ¬λ‘ λ° μμ
μμμ λͺ λͺ λ λΌμΈμ΄ λΉμ λ°νλ λͺ κ°μ§ μ€μ μλ리μ€λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
μμ 1: λμ μΌλ‘ μ±μμ§λ κ°€λ¬λ¦¬
κ³μν΄μ λμ΄λλ ν¬νΈν΄λ¦¬μ€λ₯Ό 보μ¬μ£Όλ μ¬μ§ μΉμ¬μ΄νΈλ₯Ό μμν΄ λ³΄μΈμ. νΉμ μμ μ΄μ μ΄λ―Έμ§λ₯Ό νμνλ 그리λλ₯Ό μν μ μμ§λ§, μ΄ μ΄λ―Έμ§ μλ λ³λλ κ²μ λλ€. κΈ°λ³Έ 그리λ ꡬ쑰λ₯Ό μ μνκ³ λ λ§μ μ΄λ―Έμ§κ° μΆκ°λ λ μμμ λͺ λͺ μ΄ μΆκ° νμ΄λ μ΄μ μ²λ¦¬νλλ‘ ν μ μμ΅λλ€.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1em;
}
/* If we have more items than can fit in the initial implicit columns,
new implicit columns will be created and implicitly named. */
μ΄ μλ리μ€μμ repeat(auto-fill, minmax(200px, 1fr))λ λ€μ΄κ° μ μλ λ§νΌμ μ΄μ μμ±ν©λλ€. μ½ν
μΈ κ° μ΄ μ΄λ€μ λμΉλ©΄ μλ‘μ΄ μμμ μ΄μ΄ μμ±λ©λλ€. auto-fillκ³Ό auto-fitμ κ·Έ μμ²΄λ‘ κ°λ ₯νμ§λ§, μ΄κ²λ€μ΄ μμμ λͺ
λͺ
κ³Ό μ΄λ»κ² μνΈμμ©νλμ§ μ΄ν΄νλ κ²μ΄ ν΅μ¬μ
λλ€. μλ₯Ό λ€μ΄, νμν κ²½μ° μ¬λ¬ μμμ μ΄μ κ±Έμ³ νλͺ©μ λ°°μΉν μ μμ§λ§, μ΄λ¬ν μμμ λΌμΈμ μ§μ λͺ
λͺ
νλ €λ©΄ μμ± ν¨ν΄μ μμμΌ ν©λλ€.
μμ 2: κ°λ³ μ½ν μΈ λ₯Ό κ°μ§ λ€μ€ μ΄ λ μ΄μμ
λ΄μ€ μΉμ¬μ΄νΈλ μ½ν μΈ μ 그리κ²μ΄ν°λ₯Ό μκ°ν΄ 보μΈμ. κΈ°μ¬λ€μ΄ λ€μ€ μ΄ νμμΌλ‘ νμλ©λλ€. ν νμ κΈ°μ¬ μλ μ½ν μΈ λ νλ©΄ ν¬κΈ°μ λ°λΌ μ‘°μ λ μ μμ΅λλ€. κΈ°λ³Έ 그리λ ꡬ쑰λ₯Ό μ μνκ³ νμμ λ°λΌ μμμ μ΄μ΄ μμ±λλλ‘ ν μ μμ΅λλ€.
.news-feed {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 explicit columns */
gap: 15px;
}
.news-item:nth-child(4) {
grid-column: 1; /* Explicitly placing the 4th item in the first column */
grid-row: 2; /* This item will start a new implicit row */
}
.news-item:nth-child(5) {
grid-column: 2; /* This item might implicitly be in the 2nd column of a new row */
}
μ΄ μμμ, μΈ λ²μ§Έ μ΄μ λμ΄ νλͺ©μ λ°°μΉνλ©΄(μ: λͺ
μμ μ΄μ λ μ μνλ€λ©΄ 4λ²μ§Έ νλͺ©), 그리λλ μμμ μ΄μ μμ±ν©λλ€. 3λ²μ§Έ λͺ
μμ μ΄ λ€μ λΌμΈμ μ΄λ¦μ [column-start] 4κ° λ©λλ€.
μμ 3: 볡μ‘ν λμ보λ λλ κ΄λ¦¬μ μΈν°νμ΄μ€
λμ보λλ μ’ μ’ λ€λ₯Έ μμ ―μ΄λ ν¨λμ μΆκ°νκ±°λ μ κ±°ν μ μλ λͺ¨λμ λμμΈμ νΉμ§μΌλ‘ ν©λλ€. μμμ λͺ λͺ μ μ¬μ©νλ 그리λ λ μ΄μμμ μ΄λ¬ν λμ ν¨λμ ν¨μ¬ μ½κ² κ΄λ¦¬ν μ μκ² ν΄μ€λλ€. μ£Όμ μΉμ μ μν κΈ°λ³Έ 그리λλ₯Ό μ μνκ³ μμ€ν μ΄ μ€λ²νλ‘ μ½ν μΈ μ λν μΆκ° 그리λ λΌμΈμ μμ±νλλ‘ ν μ μμ΅λλ€.
λ€λ₯Έ μκ°λμ νμμ μ¬μ©νλ κΈλ‘λ² λμ보λμ κ²½μ°, κ°κΈ° λ€λ₯Έ λ°μ΄ν° μκ°νλ μμ ―μ΄ νμ±νλ μ μλλ°, μμμ λͺ λͺ μ κ²¬κ³ ν ꡬ쑰μ μ ν μμ΄ μ΄λ¬ν λ³νλ₯Ό μμ©ν μ μλ μ μ°μ±μ μ 곡ν©λλ€.
κ³ κΈ κΈ°μ λ° κ³ λ € μ¬ν
μμμ λͺ λͺ μ λλΆλΆ μλμ΄μ§λ§, μ΄μ μν₯μ λ―ΈμΉκ³ μνΈμμ©ν μ μλ λ°©λ²μ΄ μμ΅λλ€:
μμμ λͺ λͺ κ³Ό `grid-auto-flow` ν¨κ» μ¬μ©νκΈ°
μΈκΈνλ―μ΄ grid-auto-flow μμ±μ λ§€μ° μ€μν©λλ€. denseλ‘ μ€μ νλ©΄ λΉ κ³΅κ°μ μ±μ°λ €κ³ μλνλ©΄μ λ λ§μ μμμ νΈλμ΄ μμ±λ μ μμ΅λλ€. μ΄λ λ λ§μ μμμ μΌλ‘ λͺ
λͺ
λ λΌμΈμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€. μ΄ λμμ μ΄ν΄νλ κ²μ΄ 그리λ ꡬ쑰λ₯Ό μμΈ‘νλ λ° ν΅μ¬μ
λλ€.
μμμ λΌμΈ μ°Έμ‘°νκΈ° (μ£Όμν΄μ)
μμμ λΌμΈμ λν μ΄λ¦μ λͺ μμ μΌλ‘ μ μΈν μλ μμ§λ§, μμ±λ λ²νΈλ₯Ό κΈ°λ°μΌλ‘ μ°Έμ‘°ν *μ*λ μμ΅λλ€. μλ₯Ό λ€μ΄, 3μ΄ κ·Έλ¦¬λκ° μμμ μΈ 4λ²μ§Έ μ΄μ μμ±νλ€λ κ²μ μλ€λ©΄, μ΄λ‘ μ μΌλ‘ κ·Έ 4λ²μ§Έ μ΄κ³Ό κ΄λ ¨λ λΌμΈμ νκ²ν ν μ μμ΅λλ€. κ·Έλ¬λ μ΄ μ κ·Ό λ°©μμ λͺ μμ 그리λ μ μμ λν μ΄λ€ λ³κ²½μ΄λΌλ μμμ λͺ λͺ μμλ₯Ό λ°κΏ μ μκΈ° λλ¬Έμ μ·¨μ½ν©λλ€.
λ κ²¬κ³ ν μ κ·Ό λ°©μμ μμμ μΌλ‘ μμ±λ μ΄λ¦μ μ νν μμλ₯Ό μΆμΈ‘νκ±°λ μμ‘΄νλ λμ grid-column: span 2;λ grid-row: 3;κ³Ό κ°μ λͺ
μμ μμ±μ μ¬μ©νλ κ²μ
λλ€.
`grid-template-rows`μ `grid-template-columns`μ μνΈμμ©
grid-template-rowsμ grid-template-columnsμ λͺ
μμ μ μλ μμμ μμ±μ κ²½κ³λ₯Ό μ€μ ν©λλ€. λ§μ½ 3κ°μ λͺ
μμ μ΄μ μ μνλ©΄, 첫 λ²μ§Έ μμμ μ΄ λΌμΈμ [column-start] 4λ‘ λͺ
λͺ
λ κ²μ
λλ€ (λ μ ννλ, 3λ²μ§Έ λͺ
μμ μ΄ *λ€μ*μ λΌμΈμ΄ 4λ‘ λͺ
λͺ
λκ³ , κ·Έ μ΄νμ μμμ νΈλλ€μ΄ κ±°κΈ°μλΆν° μ΄λ¦μ μμ±νκΈ° μμν κ²μ
λλ€).
λͺ λͺ λ 그리λ λΌμΈ(λͺ μμ μΌλ‘ μ μλ)μ΄ μ°μ κΆμ κ°μ§λ©° μμμ μΌλ‘ μμ±λ λΌμΈκ³Ό 곡쑴ν μ μλ€λ κ²μ κΈ°μ΅νλ κ²μ΄ μ€μν©λλ€. λΈλΌμ°μ λ μμͺ½μ λ²νΈ λ§€κΈ°κΈ°μ λͺ λͺ μ μ§λ₯μ μΌλ‘ κ΄λ¦¬ν©λλ€.
λͺ μμ λͺ λͺ μ μ νΈν΄μΌ ν λ
μμμ λͺ λͺ μ κ°λ ₯ν¨μλ λΆκ΅¬νκ³ , λͺ μμ λͺ λͺ μ΄ λ μ°μν λκ° μμ΅λλ€:
- μμΈ‘ κ°λ₯νκ³ μμ μ μΈ λ μ΄μμμ κ²½μ°: λ μ΄μμ κ΅¬μ‘°κ° λμ²΄λ‘ κ³ μ λμ΄ μκ³ κ·Έλ¦¬λ μμμ 'header', 'footer', 'sidebar'μ κ°μ΄ λͺ
ννκ³ μλ―Έ μλ μ΄λ¦μ μ§μ νκ³ μΆλ€λ©΄
grid-template-areasλ₯Ό μ¬μ©ν λͺ μμ λͺ λͺ μ΄ μ΄μμ μ λλ€. - 볡μ‘νκ³ μνΈ μμ‘΄μ μΈ λ°°μΉμ κ²½μ°: νΉμ νλͺ©μ΄ λ μ΄μμ κΈ°λ₯μ μ€μν μ ννκ³ λͺ λͺ λ μμΉλ₯Ό μ°¨μ§ν΄μΌ ν λ, λͺ μμ μ΄λ¦μ λͺ νμ±μ μ 곡νκ³ λͺ¨νΈμ±μ μ€μ¬μ€λλ€.
- μλ―Έλ‘ μ μλ―Έκ° κ°μ₯ μ€μν λ: 'nav-primary'λ 'main-content'μ κ°μ λͺ μμ μ΄λ¦μ λ¨μν μ«μ μ΄μμ μλ―Έλ₯Ό μ λ¬νμ¬, λͺ¨κ΅μ΄λ λ¬Ένμ λ§₯λ½μ κ΄κ³μμ΄ λͺ¨λ κ°λ°μμ μ½λ κ°λ μ±μ ν₯μμν΅λλ€.
λ μ΄μμμ λν κΈλ‘λ² λͺ¨λ² μ¬λ‘
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ λμμΈν λ λ€μ μ¬νμ κ³ λ €νμμμ€:
- νμ§ν(Localization): λ²μμΌλ‘ μΈν΄ λ¬λΌμ§λ ν μ€νΈ κΈΈμ΄λ₯Ό λ μ΄μμμ΄ μμ©ν μ μλλ‘ νμΈμ. μ μ°ν 그리λλ νμμ μ λλ€. μμμ λͺ λͺ μ μ΄λ¬ν μ μ°μ±μ λμ΅λλ€.
- λ¬Ένμ λμ€νλ μ΄ μ νΈλ: μΌλΆ λ¬ΈνκΆμμλ μ½ν μΈ κ³μΈ΅ ꡬ쑰λ λμ€νλ μ΄ λ°λμ λν κ·λ²μ΄ λ€λ₯Ό μ μμ΅λλ€. λ°μνμ΄κ³ μ μ κ°λ₯ν 그리λκ° ν΅μ¬μ λλ€.
- μ κ·Όμ±(Accessibility): μ¬μ©λ 그리λ λ°©λ²μ κ΄κ³μμ΄ νμ λ μ΄μμμ΄ μ κ·Ό κ°λ₯νλλ‘ λ³΄μ₯νμΈμ. μλ§¨ν± HTMLκ³Ό ARIA μμ±μ λ§€μ° μ€μν©λλ€.
- μ±λ₯(Performance): CSSλ₯Ό μ΅μ ννμΈμ. μμμ λͺ λͺ μ΄ μ½λλ₯Ό μ€μΌ μ μμ§λ§, 그리λ μ μκ° ν¨μ¨μ μΈμ§ νμΈνμΈμ.
λμ κ³Όμ λ° μ μ¬μ ν¨μ
μ μ΅νμ§λ§, μμμ λͺ λͺ μ μ§λμΉκ² μμ‘΄νλ©΄ λ€μκ³Ό κ°μ μ΄λ €μμ΄ μκΈΈ μ μμ΅λλ€:
- μμΈ‘ κ°λ₯μ±: μμμ λΌμΈμ μ νν λ²νΈ λ§€κΈ°κΈ°λ λͺ
μμ μΌλ‘ λͺ
λͺ
λ λΌμΈλ³΄λ€ μμΈ‘νκΈ° μ΄λ €μΈ μ μμΌλ©°, νΉν
grid-auto-flow: denseλ₯Ό μ¬μ©νλ 볡μ‘ν μλ리μ€μμλ λμ± κ·Έλ μ΅λλ€. μ΄λ‘ μΈν΄ μ‘°μ¬νμ§ μμΌλ©΄ λλ²κΉ μ΄λ νΉμ μ€νμΌλ§μ΄ λ μ΄λ €μμ§ μ μμ΅λλ€. - μμμ μ°Έμ‘°μ μ μ§λ³΄μμ±: λ§μ½ CSSμμ μμμ μΌλ‘ μμ±λ λΌμΈ λ²νΈ(μ:
grid-column: 5;)λ₯Ό λͺ μμ μΌλ‘ μ°Έμ‘°νλ€λ©΄, 그리λ μ μμ μ¬μν λ³κ²½μ΄ '5'κ° μ°Έμ‘°νλ λΌμΈ λ²νΈλ₯Ό λ³κ²½νμ¬ λ μ΄μμμ κΉ¨λ¨λ¦΄ μ μμ΅λλ€. μΌλ°μ μΌλ‘ μλμ μμΉ μ§μ μ΄λ μ€ν¬μ μ¬μ©νλ κ²μ΄ λ μμ ν©λλ€. - μ κ· κ°λ°μλ₯Ό μν κ°λ μ±: 보μΌλ¬νλ μ΄νΈλ₯Ό μ€μ¬μ£Όμ§λ§, λͺ μμ μΈ κ΅¬μ‘° μμ΄ μμμ μμ±μ ν¬κ² μμ‘΄νλ λ μ΄μμμ νλ‘μ νΈμ μλ‘ μ°Έμ¬ν κ°λ°μκ° μ²μμλ νμ νκΈ° λ μ΄λ €μΈ μ μμ΅λλ€. λͺ νν μ£Όμκ³Ό ν©λ¦¬μ μΈ ν΅μ¬ λͺ μμ κ΅¬μ‘°κ° νμμ μ λλ€.
κ²°λ‘
CSS Gridμ μμμ λͺ λͺ λ λΌμΈμ λ λμ μ΄κ³ , μ μ§λ³΄μ κ°λ₯νλ©°, μ μ°ν λ μ΄μμμ λ§λ€κΈ° μν κ°λ ₯νμ§λ§ μ’ μ’ κ°κ³Όλλ λ©μ»€λμ¦μ μ 곡ν©λλ€. λΈλΌμ°μ κ° μμμ μΌλ‘ μμ±λ 그리λ νΈλμ μ΄λ¦μ μλμΌλ‘ μμ±νλλ‘ νμ©ν¨μΌλ‘μ¨, κ°λ°μλ 볡μ‘ν μλ리μ€λ₯Ό λ¨μννκ³ , 보μΌλ¬νλ μ΄νΈ μ½λλ₯Ό μ€μ΄λ©°, λ€μν μ½ν μΈ μ νλ©΄ ν¬κΈ°μ μννκ² μ μνλ λ νλ ₯μ μΈ μΈν°νμ΄μ€λ₯Ό ꡬμΆν μ μμ΅λλ€.
κΈλ‘λ² μ¬μ©μμκ² μ΄λ¬ν μ μμ±μ λ§€μ° μ€μν©λλ€. λ€λ₯Έ μΈμ΄, μ¬μ©μ μ νΈλ λλ μ₯μΉ μνκ³λ₯Ό μμ©νλ , μμμ λͺ λͺ μ λͺ μμ 그리λ μ μλ₯Ό 보μνλ μ μ°μ± κ³μΈ΅μ μ 곡ν©λλ€. μ΄ κΈ°λ₯μ μ μ€νκ² μ¬μ©νλ κ²μ΄ νμμ μ΄μ§λ§, κ·Έ λ©μ»€λμ¦κ³Ό μ΄μ μ μ΄ν΄νλ©΄ μμ¬ν μ¬μ§μμ΄ CSS Grid κΈ°μ μ ν₯μμμΌ λ ν¨μ¨μ μ΄κ³ μ°μν μΉ λμμΈμΌλ‘ μ΄μ΄μ§ κ²μ λλ€. μλ λΌμΈ μμ±μ νμ λ°μλ€μ¬ λ μ΄μμμμ μλ‘μ΄ μμ€μ μ μ΄λ ₯κ³Ό μ°½μλ ₯μ λ°νν΄ λ³΄μΈμ.
ꡬ쑰μ μλ―Έλ₯Ό μν λͺ μμ μ μμ λμ μ½ν μΈ νλ¦μ μν μμμ λΌμΈμ μλ μμ±μ νΌν©ν¨μΌλ‘μ¨, νλ μΉμ λ€μν μꡬλ₯Ό μΆ©μ‘±μν€λ μ§μ μΌλ‘ μ κ΅νκ³ λ°μμ΄ λΉ λ₯Έ 그리λ μμ€ν μ λ§λ€ μ μμ΅λλ€.