CSS에서 레이아웃을 구성하는 2가지 방법 : Flex & Grid

 

회사 프로젝트 내에서 한 화면에 많은 컴포넌트와 데이터를 담아야 할 일이 많아 레이아웃에 대해서 깊게 고민해보게 되었다. 

 

복잡한 레이아웃을 쉽게 구축할 수 있게 해주는 CSS Grid와 Flex에 대해서 알아보자. 

 

 

1. CSS Grid 

grid는 2차원으로 아이템을 배치할 수 있는 레이아웃으로 행과 열을 제어할 수 있다. 

 

구성 요소

• 그리드 컨테이너 : 전체 그리드를 담고 있는 요소
• 그리드 아이템 : 그리드 컨테이너의 자식 요소
• 그리드 라인 : 그리드 컨테이너 내부의 자식 요소들을 나누는 선

 

출처 : 1분코딩 블로그

 

1-1) Grid 부모 컨테이너 속성

• display : 그리드 컨테이너를 정의
• grid-template-columns : 명시적 열의 크기를 정의
• grid-template-rows : 명시적 행의 크기를 정의
  
  •  
• grid-auto-rows : 암시적인 행의 크기를 정의
• grid-auto-columns: 암시적인 열의 크기를 정의
• grid-template-areas : 영역 이름을 참조해 템플릿 생성
  •  
• grid-gap, grid-columns-gap, grid-rows-gap : 행과 열, 열과 열 사이, 행과 행 사이의 간격 크기를 정의

 

1-2) Grid 자식 컨테이너 속성

• grid-columns-start : 그리드 아이템의 열 시작 위치 지정
• grid-columns-end : 그리드 아이템의 열 끝 위치 지정
• grid-row-start : 그리드 아이템의 행 시작 위치 지정  
• grid-row-end : 그리드 아이템의 행 끝 위치 지정
• grid-colum, grid-row : 위 속성들(grid-column-xxx, grid-row-xxx)의 단축 속성
• grid-template-areas
  
  • fr(fractional unit) 

 

2. CSS Flex

flex는 1차원(row or column)으로 아이템을 배치할 수 있는 레이아웃으로 컨테이너를 채우기 위해 항목의 크기가 조정되는 방식으로 공간을 분배할 수 있다.

 

구성 요소

• 플렉스 컨테이너 : 부모 요소
• 플렉스 아이템 : 자식 요소

 

 

 

3. Grid와 Flex 함께 사용하기

/*Grid로 전체 레이아웃 구성*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

/* Flex로 헤더 영역을 구성합니다. */
.header {
  grid-column: span 3;
  display: flex;
  align-items: center;
}

/* Flex로 메인 영역의 섹션들을 구성합니다. */
.main > section {
  display: flex;
}

/* Flex로 푸터 영역을 구성합니다. */
.footer {
  grid-column: span 3;
  display: flex;
}