[CSS_study] display : grid

* grid를 배우는 이유는??

• flexbox에서 좌우배치, 중앙배치는 쉽지만 grid형태를 만드는 게 어려움

* grid design은 대부분 father에서 설정한다.

• 규칙은 flexbox와 거의 비슷하다.
• display: grid

* grid-template-columns : column의 크기 및 갯수를 설정

ex) grid-template-columns: 20px 55px 89px 100px;

column 4개를 만들건데
첫 번째 column은 20px,
두 번째는 55px,
세 번째는 89px,
네 번째는 100px로 해라

 

(참고) row의 크기를 설정하지 않으면 font-size의 크기만큼 커진다.

(참고) 더 이상 column이 없다면 다음 줄로 넘어간다.

* grid-template-rows : row의 크기 및 갯수를 설정

  - column과 동일한 방식

* gap (column과 row사이의 공간 설정)

• gap: column과 row 사이의 공간을 설정
• column-gap: (column 사이 공간 설정)
• row-gap: (row 사이 공간 설정)

* grid 예시코드

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

.father {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 100px 50px 300px;
  column-gap: 5px;
  row-gap: 10px;
}

.child {
  background: peru;
  color: white;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

---

* repeat

• grid-template-columns와 grid-template-rows에서 repeat([개수], [크기])으로 더 쉽게 할 수 있다.
  • (참고) 내가 원하는 부분만 repeat가능
  • (참고) auto를 사용하면 최대한 크게 만들어준다.

ex) grid-template-columns : repeat(4, 200px)

ex) grid-template-columns : 100px repeat(2, 200px) 100px

ex) auto 200px auto auto 두번째 200px 적용이고 나머지 그리드들은 auto로 적용

* grid-template-areas

• 같은 영역은 서로 이어져 있어야 한다.
• 이어져 있더라도 그 집합 영역이 'ㄱ'자 or 'ㄴ'자 모양이면 작동이 되지않는다.
• 직사각형이나 정사각형일 때만 작동이 된다.
• grid-area에 있는 이름과 grid-template-areas에 있는 이름이 같아야 한다.
  • class 이름은 상관없다.
• grid-template-areas공간을 . (점) 혹은 언더바( _ )를 사용하여서 빈공간으로 만들어 줄 수도있다.

* grid-template-areas 예시 코드 (빈공간 만드는법)

.grid {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    "header header header header"
    "content content _ nav"
    "content content . nav"
    "footer footer footer footer";
}

 

* grid-template-areas 예시코드

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";
}

.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}