그럼에도 불구하고

👨‍💻

[Responsive web] CSS 그리드 레이아웃이란? 본문

HTML, CSS/Responsive web

[Responsive web] CSS 그리드 레이아웃이란?

zenghyun 2022. 12. 23. 01:32

 

오늘은 CSS 그리드 레이아웃에 대해 알아보자

 

 

 

[ CSS 그리드 레이아웃 ]

그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃(CSS grid layout)이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다.

 

하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. 

 

 

 

 CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다.

그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말한다. 

 

CSS 그리드 레이아웃은 가로 방향을 가리키는 줄(row)과 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성한다.

그리고 칼럼과 칼럼 사이, 줄과 줄 사이의 간격을 지정해서 원하는 형태의 레이아웃을 만든다.

 

 

1, 4, 7이 하나의 칼럼이고 2, 5, 7이 또 하나의 칼럼을 구성하며, 모두 3개의 칼럼으로 이루어져 있다.

그리고 1, 2, 3이 하나의 줄이고 4, 5, 6이 또 다른 줄을 구성하여 모두 3개의 가로 줄로 이루어진다.

 

 

 

 

[ 그리드 컨테이너를 지정하는 display 속성 ]

그리드 레이아웃은 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야 한다.

그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid로 지정한다.

 

종류 설명
grid 컨테이너 안의 항목을 블록 레벨 요소로 배치한다.
inline-grid 컨테이너 안의 항목을 인라인 레벨 요소로 배치한다.

 

 

 

[ 칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성 ]

 

그리드 컨테이너 안에 항목을 배치할 때 칼럼과 줄의 크기와 개수를 지정하려면 grid-template-columns 속성과 grid-template-rows 속성을 각각 사용한다. gird-template-columns 속성은 그리드 컨테이너 안의 항목을 몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정한다.

 

 

다음 예제를 보자.

 

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>
      #wrapper{
        display:grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows:100px;
      }
    .items{
      padding:10px;
      background-color:#eee;
    }   
    .items:nth-child(odd){
      background-color:#bbb;
    }
    </style>

  </head>
  <body>
    <div id="wrapper">
      <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, sit amet consectetur adipisicing elit. </div>
      <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem ipsum dolor sit amet.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem ipsum dolor sit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem, ipsum dolor.</div>
    </div>
  </body>
  </html>

 

 

결과

 

 

 

[ 상대적인 크기를 지정하는 fr 단위 ]

그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 픽셀(px)을 이용하면 항상 크기가 고정되므로 반응형 웹 디자인에 적합하지 않다.

그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr(fraction) 단위를 사용한다. 

 

예시 

 

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

 

 

[ 값이 반복될 때 줄여서 표현할 수 있는 repeat() 함수 ]

 

px이나 fr 단위를 사용하면 똑같은 값을 여러 번 반복해야 한다.

CSS 그리드 레이아웃에는 내장된 repeat()이라는 함수를 사용하면 반복하지 않고 간단하게 표현할 수 있다.

 

예시

 

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

 

 

[ 최솟값과 최댓값을 지정하는 minmax() 함수 ]

 

minmax() 함수를 사용하면 줄 높이를 고정하지 않고 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있습니다. 

 

예시

 

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>
     #wrapper{
      width:600px;
      display:grid;  /* 그리드 컨테이너 지정 */
      grid-template-columns:repeat(3, 1fr);  /* 너비가 같은 칼럼 3개 */
      grid-template-rows: minmax(100px, auto);  /* 줄 높이 최소 100px */
    }
    .items{
      padding:10px;
      background-color:#eee;
    }   
    .items:nth-child(odd){
      background-color:#bbb;
    }
    </style>

  </head>
  <body>
    <div id="wrapper">
      <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, sit amet consectetur adipisicing elit. </div>
      <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem ipsum dolor sit amet.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem ipsum dolor sit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
      <div class="items">Lorem, ipsum dolor.</div>
    </div>
  </body>
  </html>

 

 

결과

 

 

 

[ 자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit 값 ]

 

repeat() 함수를 사용할 때 auto-fit이나 auto-fit을 함께 사용하면 화면 너비에 따라 칼럼 개수를 조절할 수 있다.

 

예시

 

grid-template-columns : repeat(auto-fit, 200px);

 

auto-fit이나 auto-fill 모두 칼럼 개수를 자동으로 조절해주므로 화면이 넓어지면 칼럼 개수가 많아지고 반대로 화면이 좁아지면 칼럼 개수가 줄어든다.

 

auto-fit을 사용하면 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시하고, auto-fill을 사용하면 칼럼이 최소 너비만 표시하고 남는 공간은 그대로 둔다. 

 

예시

 

    <style>
     #wrapper1{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));  /* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
      margin-bottom:20px;
    }
    #wrapper2{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));  /* 칼럼 최소 너비만큼 채워서 표시 */
    }    
    h1 {
      font-size:24px;
    }
    .items{
      padding:15px;
      background-color:#eee;
    }   
    .items:nth-child(odd){
      background-color:#bbb;
    }
    </style>

 

결과

 

 

 

 

[ 그리드 항목의 간격을 지정하는 grid-column-gap, gid-row-gap, grid-gap 속성 ]

 

칼럼과 칼럼사이, 줄과 줄 사이, 칼럼과 줄 사이에 간격을 지정할 수 있다.

 

종류 설명
grid-column-gap 칼럼과 칼럼 사이의 간격을 지정한다.
grid-row-gap 줄과 줄 사이의 간격을 지정한다.
grid-gap 칼럼과 줄 사이의 간격을 한꺼번에 지정한다.

 

예를 들어 줄과 줄 사이의 간격을 20px로 하고, 칼럼과 칼럼 사이의 간격을 30px로 하려면 다음과 같이 지정할 수 있다.

 

grid-row-gap : 20px; 
grid-column-gap : 30px;

 

grid-gap 속성을 이용해 칼럼과 줄의 간격을 한꺼번에 지정할 수도 있는데, 이때 첫 번째 값은 grid-row-gap에 해당하고 두 번째 값은 grid-column-gap에 해당한다.

 

 <style>
      #wrapper{
        display:grid;
        grid-template-columns:repeat(3, 200px);  /* 너비 200px인 칼럼 3개 */
        grid-template-rows: minmax(100px, auto);  
        grid-gap:20px 30px;  /* 칼럼 간격 30px, 줄 간격 20px  */
        /* grid-column-gap:30px; */
        /* grid-row-gap:20px; */
      }
      .items{
        padding:15px;
        background-color:#eee;
      }   
      .items:nth-child(odd){
        background-color:#bbb;
      }
    </style>

 

 

결과

 

 

이 외에도 플렉스 박스 레이아웃 살펴보았던 justify-content나 align-content 같은 속성을 사용하여 그리드 레이아웃의 항목을 정렬할 수 있다.

 

[ 그리드 라인을 이용해 배치하기 ] 

 

그리드 레이아웃은 눈에 보이지 않는 그리드 라인이 포함되어 있다. 

 

그리드 라인을 이용해서 그리드 항목을 배치할 수 있는데, 이때 사용하는 속성은 다음과 같다.

 

종류 설명 예시
grid-column-start 칼럼 시작의 라인 번호를 지정한다. gird-column-start : 1
grid-column-end 칼럼 마지막의 라인 번호를 지정한다. gird-column-end : 4
grid-column 칼럼 시작번호와 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용한다. grid-column : 1/4
grid-row-start 줄 시작의 라인 번호를 지정한다. gird-end-start : 2
gird-row-end 줄 마지막의 라인 번호를 지정한다. grid-row-end : 4
gird-row 줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용한다. gird-row : 2/4
grid-area 각 영역에 템플릿 이름을 지정한다. grid-area : box

 

 

예시 

 

  #wrapper{
        width:700px;
        display:grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(3,100px);
      }
      .box{
        padding:15px;
        color:#fff;
        font-weight:bold;
        text-align:center;
      }   
      .box1 {
        background-color:#3689ff;
        grid-column: 1/4;
      }
      .box2 {
        background-color:#00cf12;
        grid-row: 2/4;
      }
      .box3 {
        background-color:#ff9019;
        grid-column: 2/4;
        grid-row-start: 2;
        }
      .box4 {
        background-color:#ffd000;
        grid-column: 3/4;
        grid-row-start: 3;
      }

 

 

결과

 

 

 

이어서 그리드 컨테이너로 사용하는 요소에 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 정할 수 있다. 템플릿 영역을 비워 두려면 그 자리에 마침표(.)를 넣으면 된다. 그리고 한 줄에 들어갈 템플릿 영역을 큰따옴표 ( " " )로 묶어주면 된다. 

 

예시 

 

grid-template-area:
"box1 box1 box1"
"box2 box3 box3"
"box2 .    box4";

 

실제로 코드에 적용해 보자

 

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>
      #wrapper{
        width:700px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(3, 100px);
        grid-template-areas: 
        "box1 box1 box1"
        "box2 box3 box3"
        "box2 . box4";
      }
      .box{
        padding:15px;
        color:#fff;
        font-weight:bold;
        text-align:center;
      }   
      .box1 {
        background-color:#3689ff;
        grid-area: box1;
      }
      .box2 {
        background-color:#00cf12;
        grid-area: box2;
      }
      .box3 {
        background-color:#ff9019;
        grid-area: box3;
        }
      .box4 {
        background-color:#ffd000;
        grid-area: box4;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div> 
      <div class="box box3">box3</div>
      <div class="box box4">box4</div>
    </div>
  </body>
  </html>

 

결과

 

'HTML, CSS > Responsive web' 카테고리의 다른 글

[Responsive web] Flexbox Froggy  (0) 2023.01.11
[Responsive web] flexbox와 main axis, class axis에 대해 알아보자  (0) 2023.01.09
[Responsive web] 플렉시블 박스 레이아웃이란?  (0) 2022.12.22
[Responsive web] 그리드 레이아웃이란?  (0) 2022.12.22
[Responsive web] 반응형 웹 알아보기  (4) 2022.12.22
'HTML, CSS/Responsive web' Related Articles more
Comments