css grid

grid란? 행 과열을 이용해 레이아웃을 잡는 기능을 하는 속성이다

grid는 flex와 유사하게 container(부모 요소)에 사용되는 속성과 items(자식 요소)에 사용되는 속성이 나뉜다

container에 사용되는 속성들 

display : grid, inline-grid = container(부모요소)에 grid를 사용하겠다고 선언하는 기능이 있다
grid와 inline-grid의 차이 = gird는 container가 수직으로 쌓이고 inline-grid는 container가 수평으로 쌓인다 이때 items에 레이아웃에는 영향이 없다

grid-template-rows : 명시적으로 행(가로줄)을 생성하고 items(자식요소)의height값을 설정한다. 이때 행의 크기를 하나하나 설정하는데 크기 설정을 한만큼 행이 생성된다.

ex)

 div.container {
        display: grid;
        grid-template-columns:200px 200px ;
}

위코드를 예시로 container라는 class를 가진 div태그는 grid-template-columns에 크기를 200px로 2개 명시했으므로 width값 200px의 2개의 행이 생성된다
 
grid-template-columns : 명시적으로 열(세로줄)을 생성하고 items(자식요소)의width값을 설정한다. 이때 열의 크기를 하나하나 설정하는데 크기 설정을 한만큼 열이 생성된다
ex) 

div.container {
        display: grid;
        grid-template-rows:200px 200px ;
}

위코드를 예시로 container라는 class를 가진 div태그는 grid-template-columns에 크기를 200px로 2개 명시했으므로 height값 200px의 2개의 열이 생성된다

fr : container(부모요소)의 크기에 비례하여 크기를 설정하는 기능이 있다 container의 크기가 변해도 내부 items의 크기가 비율에 따라 유지된다는 장점이 있다. 
ex)

 <style>
      div.container {
        display: grid;
        grid-template-columns:1fr 3fr  ;
        grid-template-rows:100px 100px ;
        border: 3px solid red;
        width= 400px
      }
      div.item{
        border:2px dashed red;
      }
    </style>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

위코드에서 container(부모 요소)의 width는 400px이고 grid-template-columns의 2개의 fr을 이용해 2개의 행을 만들어줬다 이때 fr은 사용된 fr전부를 더해 container의 크기를 나눈다 현제 1fr과 3fr을 명시했으므로
4fr로 400px을 나누면 1fr은 100px이된다 때문에 1번 하아(1fr)은 100px을 가져가고 2번 하아(3fr)은 300px의 width값을 가져가게 된다.

fr을 많이 명시해야할때 repeat이라는 속성 값을 사용하면 효율적이다 repeat은 해당 값을 반복하는 기능이 있다
사용법 grid-template-rows: repeat(반복할횟수,반복할크기) 이때 반복할 크기에 패턴을 설정할 수 있다
ex1) 

grid-template-rows: repeat(3,1fr)

위코드를 해석하면 1fr의 크기를 3번 반복하여 container(부모 요소)의 크기에 비례해 3개의 가로줄이 생성된다.
ex2)

grid-template-rows:repeat(3,1fr 200px 2fr)

위코드를 해석하면 3개의 행을 만들 건데 크기는 1fr,200px, 2fr의 패턴이 반복될 거야라고 해석할 수 있다 item이 추가되고 반복 횟수가 늘어나면 
1fr,200 px2 fr의 패턴이 반복된다

grid-template-areas: grid-area로 설정된 이름을 이용해 레이아웃을 형성한다  이때. 은 빈 공간을 형성하고 grid-template-areas로 만든 레이아웃에 grid-template-rows와, colums로 크기를 설정하면 레이아웃을 더
이쁘게 만들 수 있다.

    <style>
 div.container{
  width: 600px; 
  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);
  grid-template-areas: 
   "header  header header"   <--grid-template-areas를 사용할때  ""는 한줄에 한번 사용한다는 점을 주의하자 
   "main . aside"
   ". footer footer"
;       
 }
 .item{
   border: 5px solid blue;
 }
 .item:nth-child(1){
  grid-area:header; 
 }

 .item:nth-child(2){
  grid-area:main ; 
 }

 .item:nth-child(3){
  grid-area: aside; 
 }

 .item:nth-child(4){
  grid-area:footer ; 
 }
    </style>
    <div class="container">
       <div class="item">header</div>
       <div class="item">main</div>
       <div class="item">aside</div>
       <div class="item">footer</div>
    </div>

row-gap: 행과 행 사이의 간격을 설정한다
ex)

row-gap: 20px

 

위코드에서 가로줄의 간격이 20px만큼 떨어지는 것을 확인할 수 있다.

column-gap: 열과 열 사이의 간격을 설정한다
ex)

column-gap: 15px

  
위코드에서 세로줄의 간격이 15px만큼 떨어지는 것을 확인할 수 있다.

gap: row-gap과 column-gap의 단축속성으로써 1번 값은 row-gap의 값을 명시하고 2번 값은 column-gap의 값을 명시한다
ex)

gap: 20px(row-gap) 15px(column-gap)

grid-auto-rows: container(부모요소)영역에서 크기를 가지지 못하는 items의 height값을 설정한다
ex) grid-auto-rows: 100px
grid-auto-columns: container(부모 요소) 영역에서 크기를 가지지 못하는 items의 width값을 설정한다
ex) grid-auto-columns: 1fr

grid-auto-flow: container안에 items가 생성되는 방향을 설정한다 
기본값-row 
row = item이 수평으로 생성된다 방향 왼쪽-> 오른쪽
row dense = item이 수평으로 생성되고 이때 item의 크기 때문에 빈공간이 생기면 다음 item이 빈 공간에 들어간다
column = item이 수직으로 생성된다 방향 위->아래
column dense = item이 수직으로 생성되고 이때 item의 크기 때문에 빈 공간이 생기면 다음 item이 빈 공간에 들어간다 

align-content: items(자식요소)를 수직 정렬한다 이때 items의 총 세로 너비가 container(부모 요소) 보다 작아야 한다 
기본값: normal

속성값
normar: stretch와 같은 기능을 한다 (stretch: container안에 공백을 채우기 위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만))
start:수직축을 기준으로 시작점(위쪽)에 items를 정렬한다
center:수직축을 기준으로 가운데에 items를 정렬한다
end:수직축을 기준으로 끝점(아래쪽)에 items를 정렬한다
space-around:수직축을 기준으로  각 행에 위치한 item의 위,아래 여백을 균등하게 정렬한다
space-between:수직축을 기준으로 첫 행의 item은 시작점(위쪽)에 끝 행의 item은 끝점(아래쪽)에 정렬시킨 후 나머지 item은 균등한 여백을 가지게 정렬한다 
space-evenly: 수직축을 기준으로 모든 item의 여백을 고르게 정렬한다.


align-items: grid-view로 봤을때 items(자식 요소)가 속한 셀 안에서 수직정렬한다 이때 item의 세로 너비가 셀의 세로 너비보다 작아야 한다
기본값:  normal
속성값:
normar: stretch와 같은 기능을 한다 (stretch: container안에 공백을 채우기 위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만))
start: grid-view로봤을때 items가 속한 셀의 수직축을 기준으로 시작점(위쪽)에 items를 정렬한다
end:grid-view로 봤을 때 items가 속한 셀의 수직축을 기준으로 끝점(아래쪽)에 items를 정렬한다
center: grid-view로봤을때 items가 속한 셀의 수직축을 기준으로 가운데에 items를 정렬한다


justify-content:items(자식 요소)를 수평 정렬한다 이때 items의 총 가로나비가 container(부모 요소) 보다 작아야 한다.

기본값: normal

속성값
normar: stretch와 같은 기능을 한다 (stretch: container안에 공백을 채우기 위해 items(자식 요소)의 크기를 늘림)
start:수평축을 기준으로 시작점(위쪽)에 items를 정렬한다
center: 수평축을 기준으로 가운데에 items를 정렬한다
end:수평축을 기준으로 끝점(아래쪽)에 items를 정렬한다
space-around: 수평축을 기준으로 각 행에 위치한 item의 위,아래 여백을 균등하게 정렬한다
space-between:수평축을 기준으로 첫 행의 item은 시작점(위쪽)에 끝 행의 item은 끝점(아래쪽)에 정렬시킨 후 나머지 item은 균등한 여백을 가지게 정렬한다 
space-evenly: 수평축을 기준으로 모든 item의 여백을 고르게 정렬한다.

justify-items: grid-view로 봤을때 items(자식 요소)가 속한 셀 안에서 수평 정렬한다 이때 item의 가로나비가 셀의 가로나비보다 작아야 한다

기본값:  normal

속성값:
normar: stretch와 같은 기능을 한다 (stretch: container안에 공백을 채우기 위해 items(자식 요소)의 크기를 늘림)
start: grid-view로봤을때 items가 속한 셀의 수평축을 기준으로 시작점(왼쪽)에 items를 정렬한다
end:grid-view로 봤을 때 items가 속한 셀의 수평축을 기준으로 끝점(오른쪽)에 items를 정렬한다
center: grid-view로봤을때 items가 속한 셀의 수평축을 기준으로 가운데에 items를 정렬한다



items에 부여해주는 속성들
계발자도구에 grid라고 명시된 부분을 클릭하여 grid-view라는 도구를 이용하면 해당 container의 행과 열의 번호가 나타난다.
grid-column-start: 해당item에 행의 시작점을 설정한다 ex) grid-column-start:1 ; 
grid-column-end: 해당item에  행의 끝점을 설정한다   ex) grid-column-end:1 ;

grid-column: grid-column-start와 grid-column-end의 단축속성이다 각 속성을 /로 구분한다.
ex)

  div.item:nth-child(1){
      grid-column:1/3;
      }

위코드에서 1은 grid-column-start의 값이고 3은 grid-column-end의 값이 되고 start와 end값만큼 해당 item이 확대 또는 축소된다.

grid-row-start: 해당item에 열의 시작점을 설정한다 

ex)

grid-row-start:1 ;

grid-row-end: 해당item에 열의 끝점을 설정한다

   ex)

grid-row-end:3 ;

grid-row: grid-row-start와 grid-row-end의 단축 속성이다 각 속성을 /로 구분한다.
ex)

div.item:nth-child(1){
      grid-row:3/4;
      }

grid-area:해당 선택자의 grid이름을 부여한다 이때 해당선택자는 container(부모 요소)의 item(자식 요소)이어야 한다는 점을 주의하자
ex) 

header{grid-area:header;}

align-self: container(부모요소)안에 특정 item하나를 수직 정렬한다
기본값 : nomal (stretch와 동일한 기능)

속성 값 : 
start: 특정 item하나를 cotainer의 수직 축기 준 시작점(위쪽)에 정렬한다
center:특정 item하나를 cotainer의 수직축기준 끝점(아래쪽)에 정렬한다
end: 특정 item하나를 cotainer의 수직축기준 가운데에 정렬한다
stretch: 특정 item하나를 cotainer의 수직축기준 공백을 채우기 위해 height를 늘림

justify-self: container(부모요소)안에 특정 item하나를 수평 정렬한다
기본값 : nomal (stretch와 동일한 기능)

속성 값
start: 특정 item하나를 cotainer의 수평축 기준 시작점(왼쪽)에 정렬한다
center:특정 item하나를 cotainer의 수평축기준 끝점(오른쪽)에 정렬한다
end: 특정 item하나를 cotainer의 수평축기준 가운데에 정렬한다
stretch: 특정 item하나를 cotainer의 수평축기준 공백을 채우기 위해 height를 늘림

order:그리드 아이템의 배치순서를 변경한다 숫자가 작을수록 앞에 배치된다 속성 값으로 음수가 허용된다.

ex)

   <style>
 div.container{
   display: grid;  /* container에 grid를 사용하겠다고 선언하는속성 */
   grid-template-rows:repeat(3,100px); /* gird에 가로줄 repeat을통해 height 100px의 가로줄 3개를 생성 */
   grid-template-columns:repeat(3,1fr); /* grid의 세로줄 생성 repeat을 통해 width container너비에 비례한 값을 통해 3개의 세로줄 생성 */
 }
 div.item{
   display: grid; /* items의 content(내용)을 정렬하기위해 item에 grid를 사용하겠다고 선언 */
   justify-content: center;  /* content를 수평축기준 가운데에 정렬  */
   align-content: center;/* content를 수직축기준 가운데에 정렬 */
   
   font-size: 20px; /* 글자크기를 좀더 잘 보이게 하기위해 약간의 확대 */
   background-color:green; /* item의 영역을 표시하기위한 배경색설정 */
 }
 div.item:nth-child(3){
   order: 2;  /* nth-child를이용해 3번 박스를 선택한 후  order값을 기본값보다 높게 설정하여 마지막에 배치하기위한 코드 나머지 박스들은 order가 기본값 0 이므로 순서대로 배치됨 */
 }
div.item:nth-child(9){
   order: -1;   /* 9번박스에 order를 음수값으로 설정하여 order가 기본값 0인 나머지 박스들보다 우선하여 배치됨 즉 9번 박스가 가장 처음에 배치된다 */
 }
    </style>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

z-index : 화면에 쌓이는 순서를 설정한다 배치와다르다는점 주의하자 즉 z-index는 박스가 겹쳐있을 때 화면에 어떤 요소가 우선하여 보일 것이냐를 설정하는 개념이다
값이 높을수록 우선하여 보인다.
기본값은 auto이지만 0처럼 취급한다
음수값을 허용한다.
ex)

  <style>
div.container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,100px);
  
}
.item1{
  background-color:red;
  grid-row:1/2;
  grid-column:1/3;
}
.item2{
  background-color: black;
  grid-column:2/3;
  grid-row:1/4;
  z-index: 3; /* item1,2,3이 서로 겹쳐져있는 상황에서 item1,3보다 z-index값이 높기때문에 겹쳐져있더라도 우선하여 쌓임  */
}
.item3{
  background-color: aqua;
  grid-column: 2/4;
  grid-row: 3/4;
}
    </style>
  </body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>    
  </div>