이온 그리드(그리드)

ionic의 그리드는 대부분의 다른 프레임워크와 다르며 유연한 상자 모델을 사용합니다. 그리고 모바일 측면에서는 기본적으로 모든 휴대폰이 이를 지원합니다. 행 스타일은 행을 지정하고 열 스타일은 열을 지정합니다.

동일한 크기 그리드

행 스타일이 있는 요소에 열 스타일이 포함된 경우 열은 동일한 크기로 설정됩니다.

다음 예에서 행 스타일에는 5개의 열 스타일이 포함되어 있으며 각 열의 너비는 20%입니다.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

열 너비 지정

행의 각 열 크기를 다르게 설정할 수 있습니다. 기본적으로 열은 동일한 크기로 나누어집니다. 그러나 열 너비를 백분율(행당 12개 그리드)로 설정할 수도 있습니다.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

참고: 예에서 각 열 스타일은 위쪽 테두리와 회색 배경을 자동으로 추가합니다.

아래에는 열 너비의 일부 비율을 지정하는 스타일 이름이 나열되어 있습니다.

25%오프셋이 있는 그리드열은 왼쪽 오프셋을 설정할 수 있습니다. 예는 다음과 같습니다. .col-offset-2020%.col-offset-2525%.col-offset-33

.col-33	33.3333%
.col-50	50% ​​
.col-67	66.6666%
.col-75	75 %
.col-80	80%
.col-90	90%

33.3333%

.col- 오프셋-50

50%

.col-offset-6 7.col-offset-75.col-offset-80.col-offset-90이 예에서는 그리드의 수직 정렬을 더 잘 보여주기 위해 마지막 열이 가장 높은 콘텐츠로 설정되었습니다.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

반응형 그리드반응형 클래스 Description.반응형-sm휴대폰 환경보다 작음

66.6666%
75%
80 %
90%
Vertical Alignment Grid	flexbox 모델을 사용하면 열의 수직 정렬을 쉽게 설정할 수 있습니다. 세로 정렬에는 위쪽, 가운데, 아래쪽이 포함되며 각 행, 열 또는 특정 열에 적용할 수 있습니다.
가로 화면, 세로 화면 등 전환 시 휴대기기 화면 다양한 너비에 따라 크기를 조정하려면 각 행의 그리드를 설정해야 합니다.	다양한 장치에 대한 반응형 클래스의 스타일은 다음과 같습니다.

---

.반응형-m 디

태블릿 세로 화면보다 작음

.반응형-lg

---

이 태블릿 가로 화면보다 작음

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>