Grid

Grid

요소를 2차원 배치 시킬 수 있는 CSS 모듈

 

Grid의 여러 속성

grid-template

그리드의 열과 행을 정의하는 속성

.container {
  display: grid;
  grid-template-rows: 100px 200px 200px;
  grid-template-columns: 100px 300px 100px;
  width: 500px;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

1. grid 요소의 가로, 세로 크기를 gird-template-colums, grid-template-rows로 설정할 수 있다

.container {
  display: grid;
  grid-template: 100px 200px 200px / 100px 300px 100px;
  width: 500px;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

1. grid-template를 한줄로 작성할 수도 있다

2. grid-template의 첫번째 값은 grid-template-rows값, 두번째 값은 grid-template-columns 값이다

.container {
  display: grid;
  grid-template: 1fr 2fr 2fr /1fr 3fr 1fr;
  width: 500px;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

1. fr 단위는 요소의 크기를 배수로 설정한다

Grid 아이템과 Flex 아이템의 차이점?

1.Flex 아이템은 크기를 px로 고정해도 flex-shrink의 값에 따라 컨테이너에 맞춰 변할 수 있다.

2. Grid 아이템은 shrink와 같은 속성이 없고, 컨테이너에 맞춰 변하게 하려면 auto, fr 같은 속성이 필요하다

.container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 100px 100px 100px;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

 

grid-row, grid-column

요소를 원하는 위치에 배치시키는 속성

.red {
  background-color: rgba(255, 0, 0, 0.788);
  grid-column: 2/4;
  grid-row: 1/3;
}

1 . 그리드의 라인 번호로 원하는 위치에 원하는 크기로 배치시킬 수 있다

span

.red {
  background-color: rgba(255, 0, 0, 0.788);
  grid-column: 2 / span 2;
  grid-row: 1 / span 2;
}

1. 해당 그리드 행, 열에서 차지할 거리를 지정한다

2. 위 두 코드는 동일한 기능을 한다

 

그리드 함수

repeat

.container {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 10px;
  width: 500px;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

.item {
  border-radius: 20px;
}

1. repeat의 첫번째 인자는 반복할 횟수, 두번째 인자는 각 요소의 크기 또는 배치다

minmax

.container {
  display: grid;
  grid-template: 1fr 1fr 1fr / minmax(100px, 200px) minmax(100px, 1fr) minmax(100px, 1fr);
  width: auto;
  height: 500px;
  margin: 200px auto;
  border: 5px dashed gray;
}

1. minmax는 2개의 인자를 받는다

2. 첫번째 인자는 요소의 최소 크기, 두번째 인자는 요소의 최대 크기이다