본문 바로가기

css 그리드 정리

by Recstasy 2020. 7. 30.

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;
         width100%;
         height100%;
         object-fitcontain;
     }

 





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






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 {
       displaygrid;         
   } 
   .container-inner {
       displaygrid;         
   }
   .container-nav {
       displaygrid;         
   }



그리고 클래스'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 {
       displaygrid;
       grid-template-columns:repeat(6,1fr);
grid-gap: 20px;        
   } 
   .container-inner {
       displaygrid;
       grid-template-columns:repeat(3,1fr);
grid-gap: 10px;          
   }
   .container-nav {
       displaygrid;
grid-gap: 5px;
grid-auto-flowcolumn;         
   }


전체 그리드 개수가 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/

댓글

최신글 전체

이미지
제목
글쓴이
등록일