css grid

GRID

---

• grid 적용 전

grid 적용 전

• grid 적용 후

grid 적용 후

• flexbox와 다르게 2차원적으로 구성되는 특징이 있다 (column, row)

1. grid 적용 방법

---

• grid-container 라는 클래스를 가진 section이 있다고 가정

<section class='grid-container>
    .....
</section>

• display grid 적용

section.grid-container {
  display: grid;
}

display: grid;

 

• display grid 적용 후 coulmn과 row의 갯수를 명시해 주면 된다
• column 3개, row 3개인 경우

section.grid-container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px

 

 

2. 'fr' 단위

---

grid-template-columns: 1fr 1fr 1fr;

• 위와 같이 fr 단위를 사용할 수 있는데 fr단위는 가용가능한 모든 공간을 가지는 단위다
• 예를 들어 특정 그리드의 총 길이가 300이라 하면 1fr 1fr 1fr의 값은 300 / 3 = 100 으로 계산되어 한 그리드 아이템 당 길이는 100이 된다

1fr

100px

100px과 1fr 비교

• 자동으로 비교해 주기 때문에 responsive한 환경을 쉽게 구현 가능하다

3. repeat 함수

---

• 컬럼의 갯수가 3 개이고 같은 값을 사용한다면 사용할 수 있는 함수
• grid-template-columns: repeat(3, 1fr);
• repeat( 반복할 횟수, 단위 ) 로 구성된다

 

4. Gap

---

• column의 갭과 row의 갭을 따로 설정해 줄 수 있다

// Old Syntax
grid-column-gap: 10%;
grid-row-gap: 10px;

// Standard Syntax
column-gap: 10%;
row-gap: 10%;

• column의 갭과 row의 갭을 한 줄로 줄여쓸 수 있다

/* Shorthand for column-gap and row-gap */

// Old syntax
// grid-gap: <row-gap> <column-gap>
grid-gap: 10% 10px;
grid-gap: 10%; // row-gap = 10% column-gap = 10%

// Standard syntax
gap: 10% 10px;
gap: 10%;

 

적용 된 모습

gap