CSS CSS 그리드 레이아웃 / grid-template-columns / grid-template-rows / grid-templ…
페이지 정보
작성자 모던DS
조회 66회
조회 66회
본문
CSS 그리드 레이아웃
grid-template-columns / grid-template-rows / grid-template-areas
1. 핵심 개념
Grid Container (그리드 컨테이너):
display: grid;를 설정한 부모 요소입니다.Grid Item (그리드 아이템): 컨테이너 내부의 직계 자식 요소들입니다.
Grid Line (그리드 라인): 그리드를 나누는 경계선입니다. 번호(1, 2, 3...)로 참조합니다.
Grid Cell (그리드 셀): 그리드의 가장 작은 단위(한 칸)입니다.
Grid Track (그리드 트랙): 두 라인 사이의 행 또는 열 전체를 의미합니다.
Grid Area (그리드 영역): 여러 셀을 합쳐 만든 사각형 영역입니다.
2. 컨테이너 속성 (부모 요소)
그리드의 틀을 잡을 때 사용하는 주요 속성입니다.
grid-template-columns/grid-template-rows: 열과 행의 크기를 정의합니다.fr단위: 유연한 비율(fraction)을 의미합니다. (예:1fr 2fr은 1:2 비율)repeat(): 반복되는 크기를 간편하게 작성합니다.
gap: 그리드 아이템 사이의 간격을 설정합니다.
grid-template-areas: 각 영역에 이름을 붙여 레이아웃을 시각적으로 배치합니다.
상대적인 크기를 지정하는 fr 단위
열과 행의 크기를 지정하는 px 단위는 반응형 웹 디자인에 적합하지 않음
--> 상대적인 크기를 지정하는 fr(fraction) 단위 사용
예) 너비의 비율이 2:1:2인 칼럼 3개를 배치한다면
grid-template-columns: 2fr 1fr 2fr;
값이 반복된다면 repeat( ) 함수
똑같은 값을 여러 번 반복한다면 내장 함수 repeat( ) 함수 사용
grid-template-columns: 1fr 1fr 1fr; ---> grid-template-columns: repeat(3, 1fr);
최솟값과 최댓값을 지정하는 minmax( ) 함수
행의 높이를 px 값으로 고정하면 내용이 많을 경우 내용이 가려질 수 있음
→ minmax( ) 함수를 사용하면 행 높이를 최솟값과 최댓값으로 지정 가능
예) 행 높이는 최소 100px, 최대 auto
<style> .container { display:grid; } /* auto-fit과 auto-fill을 사용해 배치하기 */ .container-1 { grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); } .container-2 { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } </style> |
- 이전글CSS 그리드 라인 (Grid Line) 기초설명 26.02.27
- 다음글CSS 그리드 레이아웃 (Grid Layout) 기초설명 26.02.27