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 / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / Flex / justify-content

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

CSS / text-align / 문단 정렬하는 속성

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬입니다. right : 오른쪽 정렬입니다. center : 가운데 정렬입니다. justify : 양쪽 정렬입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 맞추기 ...

CSS / CSS를 HTML에 적용시키는 방법

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / 세로 가운데 정렬하는 방법

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...