CSS 그리드: 파트 1 - 그리드 템플릿

4997 단어 gridcss
여기에 1에서 6까지의 숫자를 표시하는 6개의 Div가 있습니다.

   <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </body>


코드 미리보기:

격자 없음


컨테이너를 그리드로 바꾸려면 먼저 디스플레이 그리드를 클래스에 적용해야 합니다.

 .container {
    display: grid;
  }


그리드 템플릿 열



열을 지정하기 위해 컨테이너grid-template-columns를 제공합니다. grid-template-columns 속성을 사용하면 그리드에 포함할 열 수와 각 열의 너비를 정의할 수 있습니다.

.container {
   display: grid;
   grid-template-columns: 100px auto 100px;
 }

auto 키워드는 열이 너비에 남아 있는 공간을 차지한다는 것을 의미합니다.
코드 미리보기:

그리드 템플릿 행


grid-template-rows를 사용하면 각 행의 높이를 정의할 수 있습니다.

 .container {
     display: grid;
     grid-template-columns: 100px auto 100px;
     grid-template-rows: 50px 200px;
   }


코드 미리보기:

3열(위에서 아래로) 및 2행(왼쪽에서 오른쪽으로)


그리드 갭 또는 갭



행과 열 사이를 설정하려면 grid-gap 또는 gap 속성을 사용합니다.

 .container {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px 50px;
    grid-gap: 3px;
  }


2열 너비와 3행 길이의 그리드를 원한다고 가정해 보겠습니다. 이 경우 세 번째 열을 제거하고 추가 행을 추가할 수 있습니다.

.container {
   display: grid;
   grid-template-columns: 100px auto;
   grid-template-rows: 50px 50px 200px;
   grid-gap: 3px;
 }


코드 미리보기:

3행 2열

좋은 웹페이지 즐겨찾기