[CSS] display: grid 공부

드림코딩 유튜브 강의를 보면서 공부한 내용 : https://www.youtube.com/watch?v=nxi1EXmPHRs 

 

 

그리드를 사용하려면 먼저 부모요소에다가 display: grid 선언

자식들은 grid cell이 되고, 부모(grid)에다가 선언할 수 있는 속성과 자식(grid cell)에다 선언할 수 있는 속성이 있다.

 

grid(부모요소)에 지정해 줄 수 있는 속성 grid-template-columns : 몇 개의 열이 들어갈지와 각각의 열의 사이즈를 지정 grid-template-rows : 각각의 행의 사이즈를 지정 grid-template : 축약형 grid-template-areas : 영역 직접 지정 grid-auto-rows : 자동으로 그리드셀의 세로길이 지정, 컨텐츠 내용에 따라 길이를 늘어나게 하고 싶으면 minmax()함수를 이용 ex) grid-auto-rows : minmax(150px, auto) grid-column-gap : grid cell의 열 사이의 gap을 지정 grid-row-gap : grid cell의 행 사이의 gap을 지정 grid-gap : 축약형

 

grid cell(자식요소)에 지정해 줄 수 있는 속성 grid-column-start / grid-column-end : 셀이 가로(열방향)의 어디부터 어디까지 차지할 건지 지정 grid-row-start / grid-row-end : 셀이 세로(행방향)의 어디부터 어디까지 차지할 건지 지정 gird-area : 어떤 영역에 표시되기 원하는지 지정

 

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* flex 이용해서 글자 정가운데 배치 */

일단 글자가 정가운데 배치될 수 있도록 flex 속성을 지정해 주었다.

 

 

1.grid-template

 

.container {
  padding: 30px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 150px 100px 200px;
}

grid-template-columns을 이용하여 가로값이 100px인 열 3개를 만들어 주었고

grid-template-rows을 이용하여 1행은 100px, 2행은 150px, 3행은 100px, 4행은 200px이 될 수 있게 지정

  grid-template-columns: repeat(3, 100px);

 grid-template-columns: 100px 100px 100px; 는   repeat()함수를 이용하여 위와 같이 쓸 수 있다.

보통 그리드는 반응형을 만들 때 사용하기 때문에 창의 넓이에 따라 크기가 변하도록 하기 위해 %단위나 fr단위를 사용할 수 있다.

 

.container {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 150px 100px 200px;
}

1fr을 준 모습

 

 

 

.container {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
}

grid-auto-rows: minmax()를 이용하여 높이값을 자동으로 100px로 만들되, 컨텐츠 길이에 따라 높이값이 변하게 해 주었다.

또 grid-gap을 이용하여 그리드 셀을 서로 10px만큼 벌어지게 해 주었다.

 

 

 

2.grid-column/row-start/end

 

그리드 라인은 시작점부터 1,2,3...이 된다. 제일 끝부터는 -1,-2,-3...이 된다

 

.item2 {
  grid-column-start: 1;
  grid-column-end: 2;
}

item2에다 위같은 속성을 주었다.

item2가 그리드라인 1~2를 차지하기 위해 item1이 위로 올라왔다.

 

 

.item2 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

이런 식으로 지정해 줄 수 있다.

.item2 {
  grid-column: 2 / 4;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

축약형으로 간단하게 쓸 수 있다.

.item2 {
  grid-column: 2 / span 2;
}
.item3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
}

라인을 세기 번거로울 때는 간단하게 span을 써서 몇개의 영역을 차지할 건지 지정해주면 된다.

 

 

3. grid-template-areas, grid-area

 

.container {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px 20px;
  grid-template-areas: 
  'a a a'
  'b c c'
  'b d g'
  'e f g';
}

.item1 {grid-area: a;}
.item2 {grid-area: b;}
.item3 {grid-area: c;}
.item4 {grid-area: d;}
.item5 {grid-area: e;}
.item6 {grid-area: f;}
.item7 {grid-area: g;}