grid item 포지셔닝

css grid item 포지셔닝

---

포지셔닝의 방법에는 위치를 바꾸는 것, Spanning, template areas를 이용하는 방법이 있다

 

Set Up

• html 셋업

<section className='grid-container'>
    <div className='item item-1'>item-1</div>
    <div className='item item-2'>item-2</div>
    <div className='item item-3'>item-3</div>
    <div className='item item-4'>item-4</div>
    <div className='item item-5'>item-5</div>
    <div className='item item-6'>item-6</div>
    <div className='item item-7'>item-7</div>
    <div className='item item-8'>item-8</div>
    <div className='item item-9'>item-9</div>
    <div className='item item-10'>item-10</div>
    <div className='item item-11'>item-11</div>
    <div className='item item-12'>item-12</div>
</section>

• css (sass) 셋업

section.grid-container {
  height: 100vh;

  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);

  div.item {
    font-size: 1.5rem;
    text-align: center;
    line-height: 200px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 3px;
    background-color: rgb(209, 209, 209);
  }

  div.item-1 {
    background-color: rgb(254, 125, 125);
  }
}

 

 

셋업

item의 위치 변경

---

item 1의 위치를 변경

grid-row-start, grid-row-end 사용

grid-row-start: 2;  
grid-row-end: 3;

grid item에 직접 적용해주면 이동하는 모습을 볼 수 있다

 

적용 예시 코드

section.grid-container {  
  height: 100vh;

  display: grid;

  grid-template-columns: repeat(4, 1fr);  
  grid-template-rows: repeat(3, 200px);

  div.item {  
    font-size: 1.5rem;  
    text-align: center;  
    line-height: 200px;  
    font-family: Arial, Helvetica, sans-serif;  
    letter-spacing: 3px;  
    background-color: rgb(209, 209, 209);  
  }

    div.item-1 {  
    background-color: rgb(254, 125, 125);

    grid-row-start: 2;
    grid-row-end: 3;
  }
}

 

적용된 모습

grid-row-start, grid-row-end

 

grid-column-start, grid-column-end 사용

grid-column-start: 3;  
grid-column-end: 4;

 

적용된 모습

grid-column-start, grid-column-end

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end 사용

grid-row-start: 2;  
grid-row-end: 3;

grid-column-start: 3;  
grid-column-end: 4;

적용된 모습

row, column

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end 를 줄여 쓸 수 있다

grid-row(또는 column): 시작지점 / 끝 지점;

grid-row: 2 / 3;  
grid-column: 3 / 4;

 

item spanning

---

특정 아이템이 그리드의 특정 공간 다수를 차지하게 할 수 있다
앞서 설명했던 grid-row, grid-column을 사용해서 끝나는 지점을 확장할 크기만큼 설정해 주면 가능하다

grid-column: 1 / 5;

column spanning

 

grid-row: 1 / 3;

row spanning

 

또는 span 값을 이용하여 동일한 효과를 얻을 수 있다
grid-column: 1 / 5; 의 경우 grid-column: 1 / span 4; 의 형태로 표기가 가능하다

 

/* grid-column: 1 / 5 와 동일 */
grid-column: 1 / span 4;

 

grid line의 이름

---

grid line의 이름을 별도로 지정해 줄 수 있는데 grid에서 각 column과 row의 수를 정의하는 grid-template-columns(또는 rows) property로 이름 지정이 가능하다

grid-template-columns: [col-start-1] 150px [col-end-1 col-start-2] 150px [col-end-2 col-start-3] 150px [col-end-3 col-start-4] 150px [col-end-4 col-end];

눈에 띄는 값은 아니지만 position을 바꿀 때 등에서 숫자가 아닌 이름으로 사용이 가능하다

grid-column: col-start-1 / col-end;

각 줄에는 이런 이름이 붙게 된다

 

column line name

 

repeat 함수를 사용할 때에도 이름 지정이 가능하다

grid-template-rows: repeat(2, [row-start] 150px [row-end];

repeat 함수를 사용하면 row-start 1, row-end 1, 등으로 이름이 붙게 된다

 

row line name