[CSS] 5-2. CSS GRID

 

CSS GRID 란?

• CSS Grid는 2차원 레이아웃을 구축하기 위한 CSS 속성 집합입니다.
• CSS Grid의 주요 아이디어는 컨테이너 요소를 행과 열로 나누어 자식 요소로 채울 수 있게 하는 것입니다.
• 2차원 컨텍스트에서 CSS Grid를 사용하면 덜 중첩된 HTML과 더 읽기 쉬운 CSS를 작성할 수 있습니다.
• CSS Grid는 flexbox를 대체하기 위한 것이 아닙니다.
  1차원 레이아웃은 flexbox, 2차원 레이아웃은 CSS Grid를 사용하면 됩니다.

 

 

Flex 와 마찬가지로 부모 태그가 container (바탕화면 또는 바닥) 역할을 하고

자식 태그들이 items 가 되어 gird 안에 배치되게 됩니다.

container 와 items 들은 각기 다른 속성들을 가지고 있습니다.

 

 

 

1. Grid 컨테이너 속성

 

• display: grid 
  grid (기본값): 블록 레벨 그리드 컨테이너를 생성합니다.
  
  
• grid-template-columns: <track-size> ... | <repeat()>
• grid-template-rows: <track-size> ... | <repeat()>
  그리드의 열과 행의 크기를 정의합니다.
  
  <track-size>: 길이, 퍼센트, 또는 fr 단위 사용 가능
     (예: 4개의 행 또는 열을 주고 싶다면  1fr 1fr 1fr 1fr 4개의 사이즈를 주면 된다
            혹은 repeat(4, 1fr) 이렇게 ..)
  <repeat()>: 반복되는 값을 간단히 표현 (예: repeat(3, 1fr))
  
  
• gap :  0 | <length> (상하좌우 모든 방향의 공백)
• row-gap : 0 | <length> (수평 공백)
• column-gap: 0 | <length> ( 수직 공백)
  그리드 셀 사이의 간격을 설정합니다.
  (flex 와 마찬가지로 margin 으론 공백을 줄 수 없습니다. 이 속성을 사용해야 합니다.)
  
  
• justify-content: start (기본값) | end | center | stretch | space-around | space-between | space-evenly ( 수평 )
• align-content: start (기본값) | end | center | stretch | space-around | space-between | space-evenly ( 수직 )
  그리드 전체를 컨테이너 내에서 정렬합니다.
  
  
• justify-items: stretch (기본값) | start | center | end
  모든 그리드 아이템을 가로 축(행 축)을 따라 정렬합니다.
  
  
  • stretch: 셀의 너비를 채우도록 아이템을 늘립니다.
  • start: 셀의 시작점에 아이템을 정렬합니다.
  • center: 셀의 중앙에 아이템을 정렬합니다.
    end: 셀의 끝점에 아이템을 정렬합니다.
    
    
• align-items: stretch (기본값) | start | center | end
  모든 그리드 아이템을 세로 축(열 축)을 따라 정렬합니다.
  
  
  • stretch: 셀의 높이를 채우도록 아이템을 늘립니다.
  • start: 셀의 상단에 아이템을 정렬합니다.
  • center: 셀의 중앙에 아이템을 정렬합니다.
  • end: 셀의 하단에 아이템을 정렬합니다.
    
    

2. Grid 아이템 속성

 

• grid-column: <start-line> / <end-line> (기본값) | span <number>
• grid-row: <start-line> / <end-line> (기본값) | span <number>
  아이템의 열과 행 위치를 지정합니다.
  위치 이동이나 병합 시, 사용합니다.
  
  <start-line>과 <end-line>: 그리드 라인 번호
  span <number>: 차지할 트랙의 수
  
  
• justify-self: stretch (기본값) | start | center | end
• align-self: stretch (기본값) | start | center | end
  개별 아이템을 셀 내에서 정렬합니다.
  justify-items와 align-items를 개별 아이템에 대해 오버라이드합니다.
  
  
• grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
  아이템의 위치와 크기를 한 번에 지정합니다.
  <name>: grid-template-areas로 정의된 영역 이름
  숫자: 그리드 라인 번호
  
  
  
  그리드 라인번호란 아래 각 item 들 사이의 빨간 네모 숫자를 지칭합니다.

예를 들어 7번의 위치를 2번으로 이동시키고 싶다면

 

<style>
.el--8 {
  grid-column: 2 / 3;  2번과 3번 라인이란 위 사진의 빨간 네모 번호 사이의 위치를 말한다
  grid-row: 1 /2; 
      }
      
      
  /* start line 과 end line이 1차이라면 end line 값 생략이 가능합니다*/    
 .el--8 {
  grid-column: 2;  
  grid-row: 1; 
      }
</ style>

 

그리고 end line 번호를 늘려주면 각 해당하는 위치까지 길이가 늘어나게 됩니다

 

 

<style>
.el--8 {
   grid-column: 2 / 4; 
   grid-column: 2 / span 2 (이렇게 적어도 동일한 작동을 한다. 2칸을 쓰겠다는 뜻); 
   grid-column: 2 / -2 (뒤에서 부터 2번째 라인); 
   
   /*위 세개의 표현방식은 완전히 동일한 결과를 나타냅니다*/ 
   
    /* 전체 row 를 다 차지하고 싶다면..
   grid-column: 1 / -1 */
   
   grid-row: 1 /2; 
 }
 

</ style>