반응형 웹 만들기

p.371 까지함

CSS 그리드 레이아웃

격자 형태로 요소를 배치할 수 있어서 웹 문서에서 다양한 레이아웃 패턴도 만들고 반응형 웹도 구현할 수 있음
그리드 컨테이너 : 부모 요소
그리드 항목 또는 셀(cell) : 자식 요소

display의 속성값

속성값	설명
grid	블록 레벨의 그리드 컨테이너를 만듦
inline-grid	인라인 레벨의 그리드 컨테이너를 만듦

grid-temlpate-columns : 그리드의 열 크기(너비)와 개수를 지정함
grid-template-rows : 그리드의 행 크기(높이)와 개수를 지정

<!-- 열/행의 크기와 개수 지정하기 1-->
<head>
	<style>
    .container {
      display:grid;
      grid-template-columns: 100px 200px 300px;
      grid-template-rows: 50px 100px;
    }
  </style>
</head>
...
<div class="container">
	<div class="items">1</div>
	...
</div>

grid-auto-rows : 동적으로 추가된 행의 높이를 지정

<!-- 열/행의 크기와 개수 지정하기 2 -->
<head>
	<style>
		.container {
		  display:grid;
		  grid-template-columns: 100px 200px 300px;
		  grid-auto-rows: 100px;
		}
	</style>
</head>

fr 단위 : 상대적인 크기를 지정

<!-- 열 너비를 2:1:2비율로 배치 -->
grid-template-columns: 2fr 1fr 2fr;

repeat() 함수
- 값이 반복될 때 줄여서 표현

<!-- 너비가 1fr인 열을 3개 배치 -->
grid-template-columns: repeat(3, 1fr);

<!-- 행의 높이를 자동으로 지정 -->
<head>
	<style>
    .container {
      width:600px;
      border: 1px solid #ccc;
      display:grid;  /* 그리드 컨테이너 지정 */
      grid-template-columns:repeat(3, 1fr);  /* 너비가 같은 열 3개 */
      grid-auto-rows: minmax(100px, auto);  /* 행 높이 최소 100px, 최대 auto */
    }
  </style>
</head>