데브코스 TIL-CSS심화-grid

선언방법

.container {
  display: grid;
}

행(row) 열(col) 정하기

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
}

repeat 사용하여 간소화

2는 갯수, fr은 비율

.container {
  width: 400px;
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 1fr);
}

gap을 사용하여 gap정하기

.container {
  row-gap: 크기;
  column-gap: 크기;
}

auto rows, columns 이용하여 암시적으로 크기 정하기

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}
.item:nth-child(4) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

align-content 로 위치 조정

.container {
  align-content:
}

• norma normal=stretch
• start 시작점(위쪽) 정렬
• center 수직 가운데 정렬
• end 끝점(아래쪽) 정렬
• space-around 각 행 위아래에 여백을 고르게 정렬

justify-content 로 그리드Contents를 수평정렬

.container {
  justify-content:
}

• normal = stretch
• start 시작점(왼쪽) 정렬
• center 수평 가운데 정렬
• end 끝점(오른쪽) 정렬
• space-around 각 열 좌우에 여백을 고르게 정렬
• space-between 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
• space-evenly 모든 여백을 고르게 정렬

align-items 그리드 Items 들을 수직 정렬

.container {
  align-items:
}

• normal = stretch
• start 시작점(왼쪽) 정렬
• center 수평 가운데 정렬
• end 끝점(오른쪽) 정렬