그리드 레이아웃

CSS3(CSS 스타일시트, 수준 3) 그리드 레이아웃("그리드")은 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 새로운 기능입니다. 플렉스박스와 마찬가지로 그리드도 부동 또는 스크립트를 사용한 배치보다 더 나은 레이아웃 유연성을 제공합니다. 따라서 웹 페이지나 웹 응용 프로그램의 주요 영역에 대해 공간을 분할하고 크기, 위치 및 계층과 관련하여 HTML 컨트롤의 파트 간 관계를 정의할 수 있습니다.그러면 고정된 레이아웃을 만들 필요가 없습니다. 고정된 레이아웃에서는 브라우저 창 내의 사용 가능한 공간을 활용할 수 없습니다.

이 글을 쓰는 시점에 CSS3 그리드 레이아웃은 아직 개발 중입니다. CSS3 그리드 레이아웃의 현재 시험판 구현은 현재 W3C(World Wide Web 컨소시엄) 작업 초안인 CSS 그리드 레이아웃 모듈을 기반으로 합니다.

그리드를 사용하면 요소를 열과 행에 정렬할 수 있지만 그리드에는 콘텐츠 구조가 없기 때문에 HTML 표에서는 불가능한 시나리오도 가능해집니다. 그리드를 미디어 쿼리와 함께 사용하면 장치 양식 요소, 방향, 사용 가능한 공간 등의 변경에 맞춰 레이아웃을 더욱 원활하게 조정할 수 있습니다.

그리드 요소

그리드 레이아웃의 기본 구성 요소는 그리드 요소이며, 요소의 display 속성을 -ms-grid(블록 수준 그리드 요소) 또는 -ms-inline-grid(인라인 수준 그리드 요소)로 설정하여 선언합니다. 그리드 레이아웃 초안은 임시 상태이기 때문에 Internet Explorer 10 및 JavaScript로 작성된 Windows 8의 Windows 스토어 앱에서 작업하려면 이 값과 이 섹션의 모든 속성을 Microsoft 특정 공급업체 접두사인 "-ms-"와 함께 사용해야 합니다. 예를 들어 다음 코드 예제에서는 ID가 "myGrid"인 요소 내에 그리드를 만듭니다.


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


트랙(열 및 행)

그리드 요소를 만든 후 다음 속성을 사용하여 열과 행에 크기를 적용합니다.

속성설명

-ms-grid-columns

그리드 내 각 그리드 열의 너비를 지정합니다. 각 열은 공백으로 구분됩니다.

-ms-grid-rows

그리드 내 각 그리드 행의 높이를 지정합니다. 각 행은 공백으로 구분됩니다.

 

다음을 사용하여 열과 행(통칭하여 트랙이라고 함)의 크기를 조정할 수 있습니다.

  • 표준 길이 단위, 또는 개체의 너비(열) 또는 높이(행)의 비율
  • 열의 너비 또는 행의 높이가 내부 항목을 기반으로 지정됨을 나타내는 auto 키워드
  • 너비 또는 높이로 요소의 최소 너비 또는 높이가 사용됨을 나타내는 min-content 키워드
  • 너비 또는 높이로 요소의 최대 너비 또는 높이가 사용됨을 나타내는 max-content 키워드
  • 사용 가능한 공간이 허용하는 대로, 너비 또는 높이가 ab 사이임을 나타내는 minmax(a, b) 키워드
  • 다음 예제에 나오는 것과 같이 사용 가능한 공간을 분수 값에 따라 열 또는 행 간에 나누어야 함을 나타내는 분수 단위
분수 단위 예제의 경우 다음 "myGrid"  ID 선택기의 확장 버전을 고려해 보세요.

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


이 그리드에는 네 개의 열이 있고 각 열은 아래에 설명된 대로 표시됩니다.

  • 열 1(auto 키워드): 열이 열 콘텐츠에 맞게 조정됩니다.
  • 열 2("100px"): 열이 100픽셀 너비입니다.
  • 열 3("1fr"): 열이 남은 공간의 1개 분수 단위를 차지합니다.
  • 열 4("2fr"): 열이 남은 공간의 2개 분수 단위를 차지합니다.

이 그리드에는 총 3개의 분수 단위—가 있으므로 열 3에 남은 공간의—1/3(3개 분수 단위 중 1개 분수 단위)이 할당됩니다. 열 4에는 남은 공간의 2/3가 할당됩니다.

마찬가지로, 이 그리드에는 세 개의 행이 있고 각 행은 아래에 설명된 대로 표시됩니다.

  • 행 1("50px"): 행이 50픽셀 높이입니다.
  • 행 2("5em"): 행이 5em 높이입니다.
  • 행 3(auto 키워드): 행이 행 콘텐츠에 맞게 조정됩니다.

반복 그리드 트랙

동일하거나 반복 패턴을 보이는 많은 열이나 행이 있는 경우 반복 구문을 적용하여 보다 간결한 형식으로 열이나 행을 정의할 수 있습니다. 다음 두 예제는 서로 동일합니다. 단일 행과 반복 열 트랙 패턴(250px 열 뒤에 10px 제본용 여백이 있음)이 있습니다.


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


그리드 항목

그리드의 자식 요소는 그리드 항목이라고 하며 다음 속성을 사용하여 배치됩니다.

속성설명

-ms-grid-column

그리드 항목을 배치할 그리드 열을 지정합니다.

-ms-grid-row

그리드 항목을 배치할 그리드 행을 지정합니다.

 

트랙 번호 지정 시스템은 1부터 시작하는 인덱스이며 1이 기본값입니다. 이전에 선언한 그리드를 가정하여 다음 두 개의 ID 선택기를 고려해 보세요.


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

이제 이 선택기를 다음 태그에 적용합니다.


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

그리드 항목 예제

그리드 항목 맞춤

다음 속성을 사용하여 항목이 걸쳐 있는 열과 행으로 구성된 셀 가장자리를 따라 그리드 항목을 배치할 수 있습니다.

속성설명

-ms-grid-column-align

그리드 열 내 그리드 항목의 가로 맞춤을 지정합니다. 가능한 값은 center, end, startstretch입니다.

-ms-grid-row-align

그리드 행 내 그리드 항목의 그리드 세로 맞춤을 지정합니다. 가능한 값은 center, end, startstretch입니다.

 

다음과 같이 마지막 네 줄을 추가하여 "item2" 선택기를 수정합니다.


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

또한 다음 선택기를 추가합니다.


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

이제 이 선택기를 다음 태그에 적용합니다.


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

그리드 맞춤 및 위치 지정 예제

그리드 항목 겹침

동일한 열이나 행에 배치하면 그리드 항목을 겹칠 수 있습니다. 기본적으로 태그에서 뒤에 있는 항목이 앞에 있는 항목 위에 그려집니다.

이 동작을 보여 주려면 항목 3의 선택기를 변경하여 항목 2가 있는 열 2와 행 2에 배치되도록 합니다.


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

항목 3의 div가 항목 2의 div 뒤에 있기 때문에 항목 3이 항목 2 위에 그려집니다. 이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

그리드 겹침 예제

기본 동작을 재정의하려면 z-index 속성을 사용합니다.

속성설명

z-index

그리드 셀 내 그리드 항목의 계층(Z-인덱스)을 지정합니다.

 

z-index 속성은 일반적으로 position 속성이 static으로 설정되지 않은 개체에만 적용되지만, z-index 속성은 속성이 static으로 설정된 경우에도 그리드 항목에 적용됩니다.

항목 3의 선택기에서 z-index 속성에 값 "-1"을 할당하여 해당 항목을 다시 겹쳐져 있는 순서로 놓습니다.


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

이렇게 하면 Internet Explorer 10에서 항목 2가 항목 3 위에 그려집니다. 이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

그리드 항목 스패닝

다음 두 개의 속성을 사용하여 그리드 항목이 여러 열이나 행에 걸쳐 있도록 설정할 수 있습니다.

속성설명

-ms-grid-column-span

그리드 항목이 걸쳐 있는 그리드의 열 수를 지정합니다. 기본값은 "1"입니다.

-ms-grid-row-span

그리드 항목이 걸쳐 있는 그리드의 행 수를 지정합니다. 기본값은 "1"입니다.

 

항목 3의 선택기에서 -ms-grid-column-span 속성에 값 "4"를 할당하고 -ms-grid-column 속성의 값을 "1"로 변경하여 해당 항목이 네 개의 열 너비(모든 열)에 걸쳐 있도록 합니다.


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

이 페이지를 보세요. 이 페이지를 올바르게 렌더링하려면 Internet Explorer 10이 필요합니다.

정의된 그리드의 열 또는 행 수를 넘어서 스패닝하려고 하면(예를 들어 이전 예제에서 -ms-grid-column 속성의 값을 "2"로 유지하고 -ms-grid-column-span 속성을 "4"로 설정하는 경우 정의된 열 수를 1만큼 초과하게 됨) 다른 열 또는 행이 암시적으로 만들어지며, 정의된 개수를 초과하는 각 열 또는 행의 너비나 높이가 auto(콘텐츠 맞춤)로 설정됩니다.

API 참조

Grid Layout

샘플 및 자습서

CSS 그리드 오버레이 샘플
CSS 그리드를 사용하여 적응 레이아웃을 만드는 방법
적응 웹 사이트 디자인

Internet Explorer 테스트 드라이브 데모

실습: CSS3 그리드 레이아웃
그리드 시스템
Gridddle

IEBlog 게시물

IE10 Platform Preview 및 적응 레이아웃을 위한 CSS 기능

사양

CSS 그리드 레이아웃

 

 

표시:
© 2014 Microsoft