[JAY⌨️CSS] 너무 쉽고 유용한 CSS grid 간단하게 핵심 정리

 

 

 1️⃣ Grid 란?

• display:grid 를 선언하면 자식에게 적용.
• 부모요소는 grid-container 자식요소는 grid-item
• 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템.
• Gap 을 통해 셀과 셀사이의 간격을 설정.

 

Grid의 구조 (해당 이미지 출처는 위니브 수업 자료입니다.)

 

 

 

2️⃣ grid-container

• ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정.
• ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정.

 

.container{
	display:grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 200px 100px;
}

.container{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2fr 1fr;
}

/* fr이란? */
/* fraction = 분수 : 비율로 컨테이너 분할 (ex 1fr 1fr = 1:1) */

 

 

 

 

3️⃣ Grid Function

• repeat(반복 횟수 , 반복할 값)

/* grid-template-columns: 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(2, 1fr 2fr);

 

• minmax(최소폭 , 최대폭 or auto)
• auto-fill auto-fit 을 활용해서 반응형 웹에 사용하자! 두 코드의 차이는 아래 예제 이미지 참고.

 

/*  auto-fill = 가능한 많은 셀들을 정렬. 남으면 빈공간 생성 */
grid-template-columns: repeat(auto-fill, minmax(80px, auto));

/* auto-fit = 공간이 남을 경우, 그 공간을 각 셀들이 나눠 갖습니다. */
grid-template-columns: repeat(auto-fit, minmax(80px, auto));

auto-fill 과 auto-fit의 차이

 

 

 

 

 

4️⃣ Grid-item

• grid-column-start grid-column-end grid-row-start grid-row-end

  /* 좌표 입력 */
  grid-row-start: 1; 
  grid-row-end: 2; 
  grid-column-start: 1; 
  grid-column-end: 4; 


  /* 좌표 입력 줄여서 작성 */
  grid-row: 1/2;
  grid-column: 1/4;
  
  
  /* grid-area를 통해 단축 표기 */
  /* row-start / column-start(span 병합 수) / row-end / column-end (span 병합 수)  */
  grid-area: 1 / 1 / span 2 / span 2;

grid-item 좌표설정 예제

 

 

 

 

 

5️⃣ grid-template-areas

• 템플릿을 직접 선언해서 grid 좌표에 숫자가 아닌 문자열로 배치하는 방법.

 

.template-Grid {
  grid-template-rows: 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-areas:
    "header header header"
    "section section aside"
    "footer footer footer";
}

grid-template-area 활용 예제

 

 

 

 

👩🏻‍💻 요약!

• 부모요소는 grid-container 자식요소는 grid-item 행렬을 오가며 css 레이아웃을 만들 수 있다.
• ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정.
• ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정.
• grid-item은 좌표를 찍어서 위치 입력 grid-column-start grid-column-end grid-row-start grid-row-end
• repeat() 반복 함수, min() max() 비율 조정 함수를 이용하면 반응형 제작할 때 Good!
• 과거의 나... 왜 grid가 어렵다고 생각했을까? 정말 편하고 간단하다.
  Grid에 대한 예제가 궁금하다면 🔗 git_pages 에서 확인 가능 😁