grid

align-items & justify-items

default 값 stretch
부모에 적용하는 속성
각각의 cell 안에서의 수평, 수직 속성 결정(center, start, end, stretch)

• 기본값은 grid 자식들을 늘려 부모를 가득 채우게 한다
• center, start, end 값을 사용시 부모를 가득 채우지 않고 자식들의 크기만큼 cell 공간을 차지한다
• 만약 자식들의 크기 지정되 있다면 default 값인 stretch 적용 되지 않는다

shortcut

place-items: align-items justify-items

.grid {
  height: 100vh;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  background-color: orange;
}

align-content & justify-content

부모에 적용하는 속성
각각의 cell이 아닌 grid 자체를 움직인다
grid container 내에서 row, column의 배치 조정하는 속성

shortcut

place-content: align-content justify-content

.grid {
  height: 100vh;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  justify-content: center;
  align-content: center;
  background-color: orange;
}

단 1fr 로 적용시 적용되지 않았다