[CSS_study] display : grid_2 (grid-column)

* grid-column(row)-start & grid-column(row)-end

• 해당 속성을 자식에 적용한다.
• 해당 속성을 이용하여 grid-area를 쓰지 않고 직접 행과 열의 크기 설정가능
• 또한 HTML의 변경없이 element의 모습을 변경할 때 유용하다.
  • ex) grid-row-start를 1의 값을 주어 제일 위로 올라가게 만들 수 있다.
• n번 째 line에서 m번 째 line까지 column 너비 설정
  
  • line 영역임 블럭의 영역 x

(참고) 해당 속성은 정수인 숫자가 들어가며, 1부터 column(row)의 최대갯수 + 1까지 사용 가능하다.

(참고) 범위를 초과하게 되면 css가 망가져서 생각한 대로 동작하지 않게된다.
(참고) 상대단위(%, auto)등은 안됨

 

* grid-column(row)-start & grid-column(row)-end 예시코드

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

 

 

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column-start: 1;
  grid-column-end: 5;
}
.content {
  background-color: #3498db;
  grid-column-start: 1;
  grid-column-end: 4;
}

 

---

* grid-column-start: span 2; (줄이 아닌 블럭의 영역을 지정)

 

* Shortcuts (grid-column)

grid-column-start: n & grid-column-end: m

 > grid-column: n / m로 바꿔서 표현 할 수 있다

(참고) grid-column: 1 / -1 

  > 첫line부터 마지막 line까지 설정(맨 뒷줄부터 -1, -2... )

 

* gird-column: span

• span은 얼만큼의 공간을 차지하는지 보여줌
• ex) gird-column: span 2; => 2열의 공간을 차지함.
• grid-row: span 2; => 2행의 공간을 차지함.

 

(참고) 시작line과 끝line을 표현하지 않음. 다른 요소와 관계를 봐야함

ex) 동일한 시작점에 있는 두 태그의 속성의 표현이 다를경우

nav태그에서 grid-row: 1 / 3으로 속성을 표현하고 있고
content태그에서 grid-row: span 2으로 속성을 표현하면 content가 표현되지 않음

* 이유는??

content태그는 시작점이 없기 때문이다.

• 다른요소가 동일한 시작점이 있으면 span을 사용할 수 없다. 따라서 시작점을 작성해주어야한다.
  • ex) grid-row: 2 / span 2;
• 혹은 동일한 시작점에 있는 요소도 span으로 속성을 표현해야한다.
  • ex) .nav { grid-row : span 2 } .content { grid-row : span 2 }

* Shortcut 예시코드

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column: span 4;
}
.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: span 2;
}
.nav {
  background-color: #8e44ad;
  grid-row: span 2;
}
.footer {
  background-color: #f39c12;
  grid-column: span 4;
}