코드 그라데이션

21. CSS 그리드 레이아웃 본문

Front/Mega-CSS

21. CSS 그리드 레이아웃

완벽한 장면 2023. 6. 6. 20:05

CSS 그리드 레이아웃 용어

  • 플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 정하고 배치.
  • 반면에 CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다.
  • 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말함.
  • CSS 그리드 레이아웃은 가로 방향을 가리키는 줄과 세로 방향을 가리키는 컬럼으로 웹 화면을 구성
  • => 0으로 시작하지 않으며, 일반적인 배열과는 조금 다르다.

 

CSS 그리드 레이아웃 항목을 배치하는 속성

1) display : 그리드 컨테이너를 지정하는 속성

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

속성값

 

2) grid-template-columns, grid-template-rows : 칼럼과 줄을 지정하는  속성

  • grid-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;  /* 너비 200px 칼럼 3개 */
    grid-template-rows: 100px;  /* 줄 높이 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>

 

실행 결과

 

3) fr 단위 : 상대적인 크기를 지정

  • 그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 픽셀(px)을 이용하면 항상 크기가 고정되므로 반응형 웹에 적합x.
  • 그래서... 그리드 레이아웃에서는 상대적 크기를 지정할 수 있도록 fraction 단위를 사용한다.

ex. 너비가 같은 칼럼 3개 배치하기

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

 

 

4) repeat() 함수 : 값이 반복될 때 줄여서 표현을 가능하게 만듦

  • px이나 fr 단위를 쓰면 똑같은 값을 여러 번 반복해야 한다.
  • repeat() 함수는 이 작업의 번거로움을 줄여줌.

 

5) minmax() 함수 : 최솟값과 최댓값을 지정

  • 위 예제에서는 줄 높이를 100px 로 설정했는데, 줄 높이보다 내용이 더 많으면 보이지 않았다.
  • 이럴 때 이 함수를 사용하면 줄 높이를 고정하지 않고, 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있다.

예제 - 컬럼과 줄 크기를 자동으로 지정하기

<!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>

 

실행 결과

 

 

6) auto-fill, auto-fit  : 자동으로 컬럼 개수를 조절하는 값.

  • 컬럼의 너빗값과 함께 auto-fill이나 auto-fit을 지정하면 화면 너비에 따라 칼럼 개수를 조절할 수 있다.

ex. 너비가 200px인 칼럼을 화면 너비에 가득 찰 때까지 배치하기

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

 

공통점

  • 컬럼 개수를 자동으로 조절해 주므로, 화면 넓어지면 컬럼 개수가 많아지고 / 좁아지면 개수가 줄어든다.

차이점

  • 남는 공간을 채울지 말지 여부
  • 전자는 컬럼의 최소 너비만 표시하고, 남는 공간은 그대로 둔다.
  • 후자는 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시한다.

예제 - 자동으로 컬럼 개수 조절하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout / auto-fill, auto-fit</title>
  <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>
</head>
<body>
  <h1>auto-fit일 때</h1>
  <div id="wrapper1">            
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
  <h1>auto-fill일 때</h1>
  <div id="wrapper2">            
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
</body>
</html>

 

실행 결과

 

 

7) grid-column-gap, grid-row-gap, grid-gap  : 그리드 항목의 간격을 지정하는  속성

  • 기본으로 만들어지는 그리드 레이아웃은 항목이 서로 붙어 있다.
  • 이 때 항목과 항목 사이의 간격을 조절하려면 사용한다.

속성값

ex. 줄과 줄 사이의 간격을 20px로 하고, 칼럼과 칼럼 사이의 간격을 30px로 만들기

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

 

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

예제 - 그리드 항목의 간격 지정하기

<!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: 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>
</head>
<body>
  <div id="wrapper">
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
</body>
</html>

 

실행 결과

 

그리드 라인을 이용한 배치

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

ex. 칼럼 3개와 줄 3개로 이루어진 그리드 레이아웃의 모양

 

그리드 라인을 이용해 그리드 항목을 배치하는 속성

 

ex. 이러한 모양을 만들 때

우선 boxl부터 box4 영역까지 감싸고 있는 #wrapper 요소를 그리드 레이아웃 컨테이너로 지정하고, 

칼럼은 Ifr씩 3개로, 줄 높이는 minmax(3, 100px)로 지정

 

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout Test2</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:red;
      grid-area: box2;
    }
    .box3 {
      background-color:orange;
      grid-area: box3;
      }
    .box4 {
      background-color:blue;
      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>
  • box1 영역의 칼럼 라인은 1 번부터 4번까지 차지하고, box2 영역의 칼럼 라인은 1번부터 2번까지, 줄 라인은 2번에서 4번까지 차지한다.
  • 같은 방법으로 box3, box4 영역도 라인 번호를 이용해 배치할 수 있다.
  • 항목을 배치할 때 칼럼이나 줄을 하나만 차지할 경우에는 grid-column-start 나 grid-row-start 속성을 이용해 시작 번호만 지정하고 끝 번호는 지정하지 않아도 무방하다.

 

예제 - 시작 번호와 끝 번호 지정

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout Test2</title>
  <style>
    #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:red;
      grid-row:2/4;
      /* grid-column:1/2; */
      grid-column-start:1;
    }
    .box3 {
      background-color:orange;
      grid-column:2/4;
      /*grid-row:2/3; */
      grid-row-start:2;
      }
    .box4 {
      background-color:blue;
      grid-column-start:3;
      grid-row-start:3;
    }
  </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>

 

 

템플릿 영역을 만들어 배치

- 그리드 레이아웃 제작보다 쉽다.

아래 그림처럼

첫 번째 줄에는 boxl 영역을 3개 배치하고 두 번째 줄에는 box2 영역 1개와 box3 영역 2개, 그리고 마지막 줄에는 box2 영역 1개와 중간을 비워 두고 마지막에 box4 영역 1개를 배치하면 된다.

 

1. 먼저 템플릿 이름을 지정한다.

2. 그리드 컨테이너로 사용하는 #wrapper 요소에서 grid-template-areas 속성을 사용 해 템플릿 영역을 어떻게 배치할지 지정한다.

  • 템플릿 영역을 비워 두려면 그 자리에 마침표 (•)를 넣는다.
  • 한 줄에 들어갈 템플릿 영역을 큰따옴표(" ")로 묶어 주면 된다.
<!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>

 

 

 

728x90

'Front > Mega-CSS' 카테고리의 다른 글

20. 플렉스 박스 레이아웃  (0) 2023.06.06
19. 그리드 레이아웃 개관  (0) 2023.06.05
18. 미디어 쿼리  (0) 2023.06.05
17. 반응형 웹  (0) 2023.06.04
16. 에니메이션  (0) 2023.06.04
'Front/Mega-CSS' Related Articles more
Comments