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를 동시에 사용할 수 있다.