그리드(Grid)

그리드(Grid)란?

격자판 형태로 항목 무리를 배치하는 2차원 레이아웃 시스템
복잡한 반응형 웹 디자인 레이아웃을 보다 쉽고 일관되게 생성하기 위해 사용
부모 요소인 grid container와 배치하고 싶은 HTML 요소인 grid item로 구성
부모 요소에 "display: grid" 또는 "display: inline-grid"속성을 지정하여 사용
- 그리드 컨테이너 (Grid Container) 그리드의 전체영역, display: grid를 적용
- 그리드 아이템 (Grid Item) 그리드 컨테이너의 자식 요소
- 그리드 셀 (Grid Cell) 그리드 아이템이 들어가는 가상의 칸
- 그리드 라인(Grid Line) 그리드 셀을 구분하는 선
- 그리드 갭(Grid Gap) 그리드 아이템과 셀 사이의 간격

grid-template-columns & grid-template-rows

그리드의 형태를 정의하는 속성
칼럼의 갯수와 너비 및 높이를 지정
‘ ‘(공백)을 구분문자로 원하는 갯수만큼 지정 가능
‘fr’단위는 그리드 아이템이 남은 영역을 비율로써 나누어 적용

Untitled

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			background-color: gray;
			display: grid;
			grid-template-columns: 50px 1fr 1fr;
			grid-template-rows: 1fr 1fr 2fr;
		}
		.item {
			background-color: skyblue;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="item">9</div>
	</div>
</body>
</html>

repeat(반복수, 반복값)

값이 반복될 때 줄여서 자동으로 처리하는 함수
예) 1fr 1fr 1fr 을 repeat(3, 1fr)로 사용 가능

Untitled

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			background-color: gray;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
		}
		.item {
			background-color: skyblue;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
	</div>
</body>
</html>

minmax(min, max)

최소값과 최대값을 지정할 수 있는 함수

200px까지는 자동으로 width가 조절