19.11.22.금 TIL

grid

• align-content, justify-content : flex와 비슷하게 동작한다.
• place-content : align-content와 justify-content를 동시에 사용할 수 있다.

.container {
  	display: grid;
  	grid-template-columns: repeat(3, 100px);
  	grid-auto-rows: 100px;
	place-content: center /* align-content */ end /* justify-content */;
}

값을 하나만 적으면 "start"는 default 값과 같다. "end"는 오른쪽 바닥으로 이동한다.
"center"는 가운데로 이동한다.

• align-items, justify-content : 각 태그의 내용들의 위치가 이동한다.
• place-items : align-items, justify-items를 동시에 사용할 수 있다.