css 그리드 정리

css그리드는 레이아웃 제작에 유용하게 사용할 수 있다. 

레이아웃 뿐만 아니라 기타 UI, UX 용도로 범위가 확장되고 있는만큼, 

더이상 CSS그리드를 외면하기 힘들어지는 상황이다. 

이번에 확실하게 짚고 넘어갈 필요가 있다.

1 사용법 『display:grid』

---

grid사용법은 간단하다. 

먼저, 아래와 같이 'grid'클래스의 <div>태그 안에 6개의 이미지를 나열해보자.

<div class="grid">

    <div><img src="" alt=""></div>

    <div><img src="" alt=""> </div>

    <div><img src="" alt=""></div>

    <div><img src="" alt=""></div>

    <div><img src="" alt=""></div>

<div><img src="" alt=""></div>

</div>

grid의 범위를 확실하게 구분하기 위해서 

<div>태그들의 background색상과 padding값을 지정해준다. 

.grid>div{

         background:black;

         padding:1px;

     }

.grid>div::before{

        content: "";

        padding-bottom:100%;

        display:block;

}

본격적인 그리드 분류는 지금부터다.

grid클래스의 display속성을 'grid'로 지정하고,

'padding-bottom'을 100%로 줘서 그리드 아랫부분을 채운다.

 

그리고 'grid-template-columns'속성을 아래와 같이 지정해보자.

.grid {

        display:grid;

        grid-template-columns:repeat(auto-fill,mixmax(200px,1fr))

    }

《실행 결과》

grid-template-columns속성은 그리드의 칸을 분할한다. 

repeat(auto-fill, minmax(200px,1fr))의 경우, 

200px 그리드 너비에서 자동으로 1줄을 채워라는 의미다. 

이를 다음과 같이 수정할 수도 있다.

 

grid-template-columns:2fr 2fr 2fr;

만일 한줄에 6칸의 그리드를 생성하려면, 1fr을 6번 반복하면 된다.

grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;

《1fr 결과값》

1fr, 2fr에서 'fr'은 'fraction(분수,부분,비율)'을 의미하며, 

한줄에 6칸의 그리드가 들어가는 코드는 아래와 같이 대체할 수도 있다.

grid-template-columns:repeat( 6 , 1fr );

 repeat(그리드 개수, 비율)메서드를 사용한다면, 좀더 간편하게 비율을 조정할 수 있다. 

2 이미지 배치 『grid-area』

---

그리드에 이미지를 넣을 때 다음과 같은 증상이 나타날 수 있다.

그리드 내의 이미지 위치가 살짝 맞지 않은 경우인데,

이럴 때는 grid-area속성을 사용해보자.

.grid>div>img{

         grid-area:1/1/2/2;

   }

grid-area속성값은 '가로(행) 시작 / 세로(열) 시작 / 가로(행) 끝 / 세로(열) 끝'을 의미한다.

<img>영역은 상위 <div>를 기준으로 그리드 영역이 정해지며,

'1/1/2/2'는 가로,세로 모두 첫번째에서 시작해서 

두번째 그리드에서 끝나는 것을 의미한다. 

3 이미지 왜곡 『object-fit』

---

height:100% 또는 width:100%를 넣었을 때 

그리드에 이미지가 정확하게 들어가는 경우도 있지만  

대부분 왜곡이 발생하며, 이미지가 늘어난다.(최악)

이때 object-fit속성이 필요하다. 

이미지가 좌우상하로 늘어난 상황에서

object-fit속성을 적용해보자.

.grid>div>img{

         grid-area:1/1/2/2;

         width: 100%;

         height: 100%;

         object-fit: contain;

     }

 

상하좌우로 늘어난 이미지가 그리드에 맞춰진 모습을 볼 수 있다.

4 레이아웃

---

그리드를 활용한다면 아래와 같은 '모바일 ~ 대형'레이아웃을 제작할 수 있다.

[모바일, 중형 레이아웃]

[데스크탑용 레이아웃]

grid를 적용하기 전에 

메뉴 9개의 상단 <nav>바와

4개의 <section>으로 나눠진 HTML 뼈대를 생성한다. 

<nav class="container-nav">

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </nav>

  

  <div class="container-main">

    <section class="item item-type-a"></section>

    <section class="item item-type-b"></section>

    <section class="item item-type-b"></section>

    <section class="item container-inner">

      <section class="item-inner"></section>

      <section class="item-inner"></section>

      <section class="item-inner"></section>

      <section class="item-inner"></section>

      <section class="item-inner"></section>

    </section>

  </div>

[ HTML스켈레톤 구조 ]

[현재 레이아웃]

레이아웃과 그리드를 구분하기 위해서

'container'클래스는 오렌지와 검은색으로 설정했고,

그리드의 구분은 'border:1px dashed white' 점선으로 표현했다.

section{ 

        padding:10px; 

    }

    section,li{

      border:1px dashed white;

    }

    .nav-test li{

     background-color:black;

     padding:10px;

    }

  .nav-test ul {

        list-style-type:none;

        padding:0;

        margin:0;

   }

  .item{

       padding:0;

       background-color:white;

   }

  .item-type-a {

       padding-top:45%;

       background-color:orange;

   }

  .item-type-b {

       padding-top:45%;

       background-color:orange;

   }

  .item-inner {

       padding:25px 0;

       background-color:black;

   }

현재 세로로 나열된 구조를 

아래와 같은 3개의 container와 'container-main'내부의 4개의 그리드로 

레이아웃을 만들어야한다.

5  그리드배치 『grid-auto-flow』『grid-column』

---

3개의 'container'내부 구조를 모두 그리드로 만들어야 하기 때문에 

'container'클래스의 display속성을 grid로 설정한다.

.container-main {

       display: grid;         

   } 

   .container-inner {

       display: grid;         

   }

   .container-nav {

       display: grid;         

   }

그리고 클래스'item'의 그리드 개수를 6으로 설정했다.

  .item{

      padding:0;

      background-color:white;

      grid-column: span 6;

   }

'grid-column'속성은 그리드가 차지하는 공간을 설정할 수 있다. 

1] grid-column : 2 / span 2

2] grid-column : span 3

1]의 경우는 2번째 그리드 칸에서부터 2칸 그리드를 차지한다는 의미이며,

2]처럼 span 3을 명시할 경우, 전체 3칸의 그리드 영역을 확보한다.

 

현재 .item클래스는 'span 6'이므로 총 6칸의 그리드 공간을 차지하게 되고,

나머지 그리드들은 .item의 그리드 총량(6칸)에 맞춰야한다.

즉, .item클래스 하위에 있는 영역에서 'span 3'이라고 명시한다면,

50%를 차지하게 된다.(전체가 6칸이므로)

.container-main {

       display: grid;

       grid-template-columns:repeat(6,1fr);

grid-gap: 20px;        

   } 

   .container-inner {

       display: grid;

       grid-template-columns:repeat(3,1fr);

grid-gap: 10px;          

   }

   .container-nav {

       display: grid;

grid-gap: 5px;

grid-auto-flow: column;         

   }

전체 그리드 개수가 6개로 정해졌기 때문에 'container-nav'클래스 부분에는 

'grid-auto-flow:column'(자동 가로정렬)을 설정하고,

 

'item'클래스 하위에 있는 'item-tybe-b', 'item-inner'클래스의 span값도 정해준다.

.item-type-b {

      grid-column: span 3;

    }

    .item-inner {

      grid-column: span 1;

    }

span설정을 마치고나면 아래와 같은 형태의 레이아웃이 완성된다.

6 결론

---

그리드의 강점은 속도와 효율성 그리고 확장성에 있다.

수동으로 특정 행과 열을 지정할 수도 있을 뿐만 아니라 자동기능도 우수한 편이기 때문에

이제 레이아웃 분야에서도 굳이 Flex를 사용할 필요가 없을 것 같다.

Grid관련 도움되는 사이트 : 

1] https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid

2] https://studiomeal.com/archives/533

3] https://justmakeyourself.tistory.com/entry/grid-item-properties

4]https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/