CSS Grid속성

2022. 4. 13. 13:47

2022.04.12

CSS Grid

1차원 레이아웃 flex속성(수직, 수평중 택1)와 다르게 grid는 2차원 레이아웃(수직, 수평 둘다 가능)
grid는 두 방향으로 레이아웃 할 수 있음
grid는 flex와 같이 container(부모요소)와 item(자식요소)으로 구분이 됨

용어정리

Grid Track(그리드 트랙): grid의 행(row) 또는 열(column)
Grid Line(그리드 라인): 행과 열 사이사이에 있는 너비. gutter라고도 함
Grid Cell(그리드 셀): grid 하나의 칸. 아이템들이 들어갈 수 있는 하나의 공간
Grid Area(그리드 여역): 셀로 이루어진 영역(셀들의 집합)
Grid Gap(그리드 갭): grid 셀 사이의 간격

Grid Container

grid는 컨테이너에 display: grid; 를 주면서 시작됨
```
  .container {
      display: grid;
      }
```
그리드 트랙의 크기들을 지정해 주는 속성.
단위는 px, fr(=fraction으로 숫자 비율대로 트랙의 크기를 나눠줌)
repeat함수: repeat(개수, 비율)반복되는 값을 자동으로 처리할 수 있음
minmax함수: 최솟값과 최댓값 지정
auto-fill, auto-fit: column개수를 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채우는것. auto-fit은 그리드 컨테이너 내부에 공간이 남을 경우, 그 공간을 각 셀들이 나눠 갖는다
```
grid-template-rows: 그리드 행 배치
grid-template-columns: 그리드 열 배치
//고정크기와 가변크기를 섞어 쓸 수 있음
  grid-template-columns: 200px 2fr 1fr;
//repeat(반복횟수, 반복값)
  grid-template-columns: repeat(5, 1fr);
//minmax
  grid-template-row: repeat(3, minmax(100px, auto);
  최소100px는 확보하며, 100px넘거나면 auto처리    
```

gap

그리드 셀 사이의 간격을 설정

  //row 간격 5px
  row-gap: 5px;
  //column 간격 5px
  column-gap: 5px;
  //row-gap:10px, column-gap:5px;
  gap: 10px 5px;

grid-auto-colums, grid-auto-rows:트랙의 크기를 지정하지 않고 자동으로 늘려줌
gird-column, grid-row

gird-column

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 5px;
  background-color: pink;
  padding: 10px;
}
.grid-container > div {
  background-color: tomato;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item1 {
  grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

</body>
</html>

grid-row

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 5px;
  background-color: pink;
  padding: 10px;
}

.grid-container > div {
  background-color: tomato;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 3 / 5;
  grid-row: 2 / 3;
}
</style>
</head>
<body>



<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

</body>
</html>

몇 개의 셀을 차지하게 할것인지를 지정해줄수도 있음

    // 1번라인에서 2칸
    grid-column: 1 /span 2;
    // 1번 라인에서 4칸
    grid-row: 1 / span 4;

grid-template-areas: 각 영역(grid area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법으로 매우 직관적

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      width: 500px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 100px 200px 100px;
      border: 4px solid;
      grid-template-areas: 
      "header header" 
      "main nav" 
      "footer footer";
    }

    .item {
      border: 1px solid;
    }

    .item:nth-child(1) {
      grid-area: header;  
    }
    .item:nth-child(2) {
      grid-area: main;
    }
    .item:nth-child(3) {
      grid-area: nav;
    }
    .item:nth-child(4) {
      grid-area: footer;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1 header</div>
    <div class="item">2 main</div>
    <div class="item">3 nav</div>
    <div class="item">4 footer</div>
  </div>
</body>
</html>

grid-auto-flow: 아이템이 자동 배치되는 흐름을 결정하는 속성

// dense는 남은 셀의 공간을 채우게함. 
grid-auto-flow:(row생략가능) dense;
// column dense로 줄 경우 수직으로 남은 셀 공간을 채우게 됨
grid-auto-flow: column dense;

세로 방향 정렬
align-items: 아이템을 세로방향으로 정렬

  .container {
      align-items: stretch;
      align-items: start;
      align-items: center;
      align-items: end;
  }

가로 방향 정렬
justify-items: 아이템을 가로방향으로 정렬

  .container {
      justify-items: stretch;
      justify-items: start;
      justify-items: center;
      justify-items: end;
  }

place-items
align-items와 justify-itms를 같이 쓸 수 있는 단축 속성
```
  .container {
      place-items: center center;
  }
```

align-content
grid 아이템들의 높이를 모두 합한 값이 grid 컨테이너의 높이보다 작을 때 아이템들을 통째로 정렬

  .container {
      align-content: stretch;
      align-content: start;
      align-content: center;
      align-content: end;
      align-content: space-between;
      align-content: space-evenly;
  }

justify-content
gird 아이템들의 너비를 모두 합한 값이 grid 컨테이너의 너비보다 작을 때 아이템들을 통째로 정렬
```
.container {

  justify-content: stretch;
  justify-content: start;
  justify-content: center;
  justify-content: end;
  justify-content: space-between;
  justify-content: space-evenly;

}

place-content
align-content와 justify-content를 같이 쓸 수 있는 단축 속성
```
  .container {
      place-content: center center;
  }
```

Grid Item

gird container의 자식요소들로 grid의 규칙에 의해 배치됨

align-self: 해당 아이템을 세로(column)방향으로 정렬

  .item {
      align-self: stretch;
      align-self: start;
      align-self: center;
      align-self: end;
  }

justify-self: 해당 아이템을 가로(row)방향으로 정렬

  .item {
      justify-self: stretch;
      justify-self: start;
      justify-self: center;
      justify-self: end;
  }

place-self: align-self와 justify-self를 같이 쓸 수 있는 단축 속성
```
  .item {
      place-self: center center;
  }
```
order: 각각의 아이템을 시각적으로 나열 순서를 결정. 숫자가 작을수록 먼저 배치
z-index: 숫자가 클수록 위로 올라옴

'프론트엔드 > CSS' 카테고리의 다른 글

CSS ...끄적 (0)	2022.04.15
CSS filter속성 (0)	2022.04.13
가상클래스(pesudo class)와 가상요소(pesudo element) (0)	2022.04.08
CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0)	2022.04.07
CSS 속성 (0)	2022.04.06

끄적