Grid layout

✒️ 2025-05-16 12:37 내용 수정

• 테이블처럼 행(row)과 열(column)으로 구성된 화면을 구성하는 레이아웃 방식이다.
• 참고 자료 : mdn web docs grid layout, W3Schools CSS Grid, 1분코딩 Grid
• <div> 태그에 display:grid나 display:inline-grid로 설정하면 그리드 컨테이너를 만들 수 있다.

div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	width: 600px;
	height: 400px;
	border: 2px solid black;
	padding: 30px;
}

#item1{
	grid-column: 1 / 4;
	background-color: yellow;
}
#item4{
	grid-row: 2 / 4;
	background-color: pink;
}

Grid Layout 구성

• 1분코딩 Grid의 이미지를 참고했다.

Grid Layout 속성

1. Grid Container 관련 속성

• grid layout에서 fr는 컨테이너 내의 남은 공간을 비례적으로 나누는 단위다.
  • 참고 자료 : Lambdatest Sizing up Layouts: A Detailed Guide to CSS fr Unit
• repeat(n, x) : n을 x번 반복하는 함수다.
• minmax(min, max) : 최솟값과 최대값을 지정할 수 있는 함수다.

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/* grid-template-columns: (3, 1fr);과 동일 */
	grid-template-rows: repeat(2, minmax(100px, auto));
}

2. Grid Item 관련 속성