CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다.

예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .jb-item {
        border: 1px solid #444444;
      }			
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item<br>Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
    </div>
  </body>
</html>

모든 행의 높이를 같게 만들기 위해서 grid-template-rows 속성을 추가하면, 그 속성에서 정의된 행만 높이가 같아집니다. 행의 개수가 정해진 상태가 아니라면, 즉 행의 개수가 더 늘어날 수도 있다면 CSS를 계속 고쳐야 한다는 문제가 생깁니다.

.jb-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

이를 해결해주는 속성이 grid-auto-rows입니다. 행의 개수가 늘거나 줄어도 일정한 값을 적용받게 해줍니다.

.jb-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

다시 말해서 행의 개수가 늘어도 CSS를 수정할 필요가 없는 것이죠.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
      }
      .jb-item {
        border: 1px solid #444444;
      }			
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item<br>Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
    </div>
  </body>
</html>

그런데 grid-auto-rows는 IE에서 작동하지 않는다는 문제가 있습니다. 사용자가 많이 줄기는 했지만, 무시할 수는 없지요. 만약 IE 지원이 필수인 상황이라면 행의 개수를 확정하는 게 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
      }
      .jb-container > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
      }
      .jb-container > *:nth-child(3) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
      }
      .jb-container > *:nth-child(5) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(6) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
      }
      .jb-container > *:nth-child(7) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(8) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
      }      
      .jb-item {
        border: 1px solid #444444;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item<br>Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
    </div>
  </body>
</html>

Related Posts

CSS / list-style-position / 목록의 마커 위치 정하는 속성

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 표(table) 꾸미기 / 반응형 표 만들기

CSS / 표(table) 꾸미기 / 반응형 표 만들기

데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...

CSS / 박스 모델(Box Model)

CSS / 박스 모델(Box Model)

Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...

CSS / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / white-space / 공백 처리 방법 정하는 속성

CSS / white-space / 공백 처리 방법 정하는 속성

개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.   스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...