Angular 그리드 크기 조정

    사용자가 가질 수 있는 다양한 시나리오를 수용하기 위해 IgxGrid의 크기를 조절하는 방법은 다양합니다. 어떤 것은 직관적이지만, 어떤 것은 더 복잡할 수 있으므로 각각을 더 깊이 살펴보겠습니다. 설정과width 각각 퍼센트를 사용할 때 차이가 있으니 따로 살펴보겠습니다height.

    ​IgxGrid의 테두리 및 패딩 크기는 너비/높이 크기 계산에 사용되거나 테두리 상자 크기 조정이라고도 합니다. 모든 시나리오에 적용됩니다.

    Note

    사용자가 테두리 상자 크기를 재정의하는 경우 IgxGrid의 크기가 올바르게 지정된다고 보장할 수 없습니다.

    Width

    입력에width 값이 할당되어 있지 않으면 기본값이 이며100%, IgxGrid는 사용 가능한 공간을 채우려고 합니다. 해당 섹션에서Percentages 그리드가 어떻게 반응하는지 확인할 수 있습니다.

    Note

    수동으로 설정하기width 스타일 IgxGrid 그 자체가 예상치 못한 행동을 유발할 것입니다.

    Null

    그리드는width 값을 받아들일 수 있고, 이 값을null 설정하면 DOM의 모든 열을 렌더링합니다. 격자 크기는 그에 맞게 조정되어, 열 가상화가 적용되지 않아 그리드 수평 스크롤바가 없습니다.

    • 6개의 열이 있고 그 중 어느 것도 너비가 정의되어 있지 않으면, 이 상황에서 각 열이 기본적으로 할당width 되어 있기816px 때문에 그리드는 ofwidth를 갖136px 게 됩니다. 열에width 백분율이 있을 때도 마찬가지입니다. 수직 스크롤바가 렌더링되거나 추가 열을 렌더링하는 기능이 있다면 그 열의 너비도 추가됩니다.

      열 기본 격자 너비 null

    • 열 너비가 설정된200px 열이 6개라면 창에 모두 들어갈 수 있고 모두 보입니다:

      폭 널 스크롤 없음

    • 더 많은 열이나 폭이 더 큰 열이 브라우저 시야 밖으로 나가면 모두 렌더링됩니다. 열의 개수는 같지만 각 열의 너비는 다음과300px 같습니다. 모든 것이 브라우저 뷰 영역에 들어가지 않기 때문에, 기본적으로 스크롤바가 생성됩니다. 다음 예시는 바로 이 상황을 보여줍니다:

      폭 널 스크롤

    • 그리드에 어떤 형태로든 부모 요소가 있고 오버플로우 설정이 없으면 모든 열이 보이게 됩니다. 그렇지 않으면 부모 요소에 오버플로auto​scroll 우가 있으면 해당 부모 요소의 스크롤바가 네이티브로 렌더링됩니다. 다음 예시에서 부모 높이가 더 커서 시각화가 용이합니다.

      너비 널 부모 스크롤
    Note

    이러한 동작으로 인해 그리드 데이터에 너무 많은 열이 포함되어 있으면 모든 열이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

    Pixels

    ​IgxGrid width 입력이 픽셀 단위로 설정되면 전체 그리드 크기가 그 값으로 설정되어 정적이 됩니다. 브라우저 크기 조정이나 DOM 변경에 반응하지 않지만, 그리드 콘텐츠에는 해당되지 않습니다:

    • 그리드가 수평 스크롤바를 렌더링하기 위해 폭을 픽셀 단위로 설정하면, 콘텐츠 폭이 지정된 그리드width 보다 더 넓어야 합니다. 예를 들어, 열의 전체 너비가 초과1200px 된다고 가정해 봅시다. 이 경우 수평 스크롤바가 렌더링됩니다.

      폭 콜스 스크롤바

    • 그리드에 부모 요소가 있는 경우, 부모 스타일링이 스크롤 바를 렌더링할지 여부에 따라 달라집니다. 그리드 자체와 관련된 나머지 모든 요소는 여전히 유지됩니다. 부모 요소의 너비가 그리드 너비보다 작고 오버플로우 스타일이 Orauto로scroll 설정되어 있다면, 스크롤바를 네이티브로 렌더링합니다. 예를 들어, 부모가 로width 설정되어1000px 있고 IgxGrid width가 정지1200px 상태라면, 다음 그림과 비슷하게 보입니다:

      너비 콜스 스크롤 부모 스크롤 없음 너비 콜스 스크롤 부모 스크롤

    Percentages

    그때width​ ​IgxGrid는 퍼센트로 설정되어 있으며, 부모 요소의 너비에 따라 그리드 크기를 정합니다. 만약 부모 요소가 너비를 지정하지 않는다면, IgxGrid 브라우저 창에 대한 크기가 될 것입니다.

    • 예를 들어, 그리드width 입력을 로100% 설정하고 부모 요소가 없으면 브라우저 창의 가용 폭을 100% 채웁니다. 크기를 조정하면 그리드도 그에 맞게 크기가 조정됩니다.

      폭 % 100%

    • 그리드의 너비를 로100% 설정하고 특정 너비1200px를 가진 부모 요소가 있다면, 그리드의 크기는 해당 요소에 대해 비례하고 최종 너비는 다음과1200px 같습니다.

      너비 퍼센트 부모 100%

    • 만약 부모 요소가width와1000px 그리드가width가150% 설정되어 있다면, 계산된 그리드 너비는 가 됩니다1500px. 이 경우 그리드는 여전히 완전히 보이게 렌더링되지만, 부모를 설정overflow: auto 하면 그 부모가 스스로 스크롤바를 렌더링합니다.

      너비 % 150% 부모 스크롤 없음 너비 퍼센트 150% 부모 스크롤

    Height

    기본적으로 IgxGrid에 높이가 정의되지 않으면 이 설정이 됩니다100%. 해당 섹션의Percentages DOM 구조에 따라 그리드가 어떻게 반응하는지 확인할 수 있습니다.

    Note

    수동으로 설정하기height 스타일 IgxGrid 그 자체가 예상치 못한 행동을 유발할 것입니다.

    Null

    ​IgxGrid height 입력은 값을 받아들null 일 수 있으며, 값을 설정하면 스크롤바 없이 모든 행을 표시합니다. 이 경우에는 그리드가 모든 행을 렌더링하기 때문에 수직 가상화가 없습니다.

    • 이 경우 14개 행이 있는 데이터가 있는 경우 그리드는 14개 행을 모두 렌더링하고 그리드 내부에 빈 공간 없이 모두 표시되도록 그리드 크기를 조정합니다.

      높이 널 14행

    • 대신 24개의 행이 있는 경우 그리드는 여전히 모든 행을 렌더링하지만 행이 너무 많기 때문에 브라우저 경계를 초과합니다. 이것이 바로 브라우저 자체가 기본적으로 세로 스크롤 막대를 렌더링하여 사용자가 나머지 행까지 아래로 스크롤할 수 있게 하는 이유입니다.

      높이 널 24행

    • 만약 정의height 된 부모 요소가 있다면, 그리드는 여전히 모든 행을 렌더링하고 영향을 받지 않습니다. 예를 들어, 부모가 'ofheight '를 가지고 있다고650px 합시다. 또는 설정하면overflow​auto​scroll 수직 스크롤바를 렌더링하지만 그리드는 여전히 영향을 받지 않습니다:

      높이 널 24행 부모 스크롤 없음 높이 널 24행 부모 스크롤
    Note

    이러한 동작으로 인해 그리드 데이터에 너무 많은 행이 포함되어 있으면 모든 행이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

    Pixels

    ​IgxGrid height를 픽셀로 설정하는 것은 더 간단한데, 그리드가 픽셀 단위로 설정된 것과 비슷width 하게 모든 상황에서 그 특정 크기로 크기를 맞추기 때문입니다.

    • 예를 들어, 데이터의 높이500px를 4행으로 설정하면 그리드가 그 크기로 유지되고, 4행으로는 보이는 영역을 채우기에 부족하므로 빈 영역이 있을 것으로 예상됩니다.

      높이 500px 4열

    • 만약 행 수가 픽셀로 설정되었을 때height 그리드의 가시 영역을 초과하면 수직 스크롤바가 렌더링됩니다. 예를 들어, 높이가 설정되어 있고 14행이 있는 격자는500px 다음과 같이 렌더링됩니다:

      높이 500px 14행

    • 만약 정의된 부모 요소가height 있다면, 또는overflow로auto 설정되어scroll 있지 않다면 그리드는 여전히 완전히 보이게 됩니다. 그렇지 않으면 스크롤바를 렌더링할 수 있습니다.

      높이 700px 14행 부모 스크롤 없음 높이 700px 14행 부모 스크롤

    Percentages

    입력이height 백분율로 설정되면 IgxGrid는 부모 요소 높이에 따라 크기를 조절합니다. 부모 요소가height 픽셀 또는 백분율로 설정되어 있다면, 그리드 크기는 부모 요소의 크기에 대해 상대적으로 조정됩니다.

    상위 요소에 높이가 정의되어 있지 않으면 브라우저는 처음에 높이를 할당하지 않고 하위 요소와 해당 크기에 따라 크기를 지정합니다. 이것이 바로 그리드가 이를 기반으로 백분율 크기 조정을 적용하기 위해 사용할 기본 높이를 알 수 있는 방법이 없는 이유입니다. 이러한 이유로 최대 10개의 행을 렌더링하고 행이 더 많은 경우 세로 스크롤 막대가 렌더링됩니다. 그렇지 않으면 그리드가 렌더링된 행 수에 맞춰집니다. 다음 예에서 이 시나리오를 더 자세히 살펴보겠습니다.

    에 대해 집합width을 갖1200px 고, 부모 요소에 크기가 적용되지 않은 상태입니다:

    • 행이 10개 미만인 경우 그리드는 마지막 행과 표시 영역 하단 사이에 빈 공간을 두지 않고 `표시 영역의 모든 행을 맞추려고 시도합니다. 예를 들어 7개의 행으로 구성된 그리드 데이터가 있다고 가정해 보겠습니다. 그리드는 세로 스크롤 막대 없이 그리드 내부에 빈 공간 없이 7개 행을 모두 렌더링합니다.

      높이 미정의 7행

    • 행이 10개보다 많으면 나머지 행에 대해 수직 스크롤 막대가 렌더링되며 언제든지 10개의 행만 표시될 수 있습니다. 다음 예에서는 행 번호만 14로 증가됩니다.

      높이 미정의 14행

    • 부모 요소 높이를 ,800px​ ​IgxGrid​100%를 높이로 설정하면 그리드 크기가 100%800px 됩니다.

      키 비율 100% 부모 800px

    • ​IgxGrid height가 보다100% 큰 숫자로 설정되어 있고 부모 요소가 높이를 가진다면, 부모가 스크롤바를 렌더링하려면 다시 또는 또는overflow로 설정auto 되어야scroll 합니다. 그렇지 않으면 그리드가 부모 크기에 대해 완전히 보이고 크기가 표시됩니다.

      키 비율 130% 부모 스크롤 없음 키 비율 130% 부모 스크롤

    • 브라우저 창에서 그리드의 크기를100% 원하는 경우, 두 곳 모두body와 부모 그리드 요소의 높이100%를 서로 설정해야 합니다. 이 경우 부모 요소의 크기를 조절할 수 있고, 브라우저 크기를 조정하면 그리드의 크기도 그에 맞게 조정됩니다.

      키 100% 부모 100%

    Column Sizing

    그리드 크기 자체에 따라 그 안에 있는 열의 크기도 다르게 조정될 수 있으며 이로 인해 그리드가 가로 스크롤 막대를 렌더링할지 여부가 발생할 수 있습니다. 열의 너비는 픽셀, 백분율로 설정될 수 있으며 아무것도 설정되지 않은 경우 자동 크기 조정이 가능합니다. 이 섹션에서는 이러한 시나리오에 대해 자세히 살펴보겠습니다.

    Default

    기본적으로 열에 지정된 너비가 없으면 자동 크기 조정을 시도해서 그리드 뷰 영역에 빈 공간이 있으면 열을 채우게 됩니다. 자동 크기 열의 최소 너비는 이136px 열에 해당하므로, 사용 가능한 면적이 그 열보다136px 작으면 기본적으로 그 크기로 유지됩니다.

    이러한 시나리오에서 표 크기를 조정하면 열 너비도 변경 사항을 반영하여 업데이트되므로 사용 가능한 새 빈 공간이 채워집니다.

    • 열에 지정width 되지 않고 IgxGrid​width가 로null 설정되어 있다면, 그 열은 최소 로136px 크기가 됩니다. 즉, 폭이 없는 6열의 격자width null에 대해서는 각 열의 크기136px가 로 지정됩니다.

      열: 너비가 null인 기본 그리드

    • 자동 크기 열이 여러 개 있을 경우, 이들은 서로 가용 공간을 균등하게 나누게 됩니다. 즉, 열이 6개이고 빈1200px 영역이 있다면 각 열의 크기는 입니다200px.

      열은 모든 행 선택기를 기본값으로 합니다

    • 만약 빈 공간이 있어서 자동 크기 열이 작136px 아지면, 모든 자동 크기 열은 기본값136px으로 설정되어 그리드가 수평 스크롤바를 렌더링합니다. 다음 예시에서는 자동 크기 열이 12개이고 그리드width를 다음과 같이 설정해 봅1000px 시다.

      열 기본값 모두 최소 136px

    • 만약 어떤 열에 지정된 항목이 없width 지만 다른 열들은 픽셀 또는 백분율 기준으로 지정width 되어 있다면, 해당 열도 사용 가능한 공간을 채우려고 합니다. 예를 들어, 너비가 첫 번째 열에 설정되어 있지 않고 나머지 5개가 모두 오width 브를 가지고100px 있다면, 첫 번째 열이 나머지를 채웁니다.

      열 기본 첫 번째 쉼표 100px

    • 여러 열이 지정되어 있지 않width 아도 마찬가지로 사용 가능한 공간을 똑같이 나누게 됩니다. 다음 그림에서는 첫 번째 열이 로 설정되어width 있습니다100px.

      열은 모두 처음 100px 기본값입니다
    Note

    행 선택기 확인란 열 등과 같은 기능 열은 열 크기를 자동 조정할 때 고려되는 추가 공간을 채웁니다.

    Pixels

    열이 픽셀 단위로 특정width 설정되어 있으면, 수동으로 크기를 조정하지 않는 한 그 크기를 유지합니다. 열의 결합width이 정적이기 때문에 IgxGrid width 보다 작거나 초과할 수 있습니다.

    • 모든 열의 합width이 IgxGrid width 보다 작으면, 격자 안에 열이 채울 수 없는 빈 집합이 생깁니다. 이것이 IgxGrid의 예상되는 동작입니다. 다음 예시에서는 열의 폭이 있습니다150px.

      열이 150px로 인해 빈 영역이 생깁니다

    • 모든 열의 합width이 실제 IgxGrid width 보다 크면 수평 스크롤바가 렌더링됩니다. 다음 예시에서는 6개의 열 각각의 너비가 있고300px 격자의 너비가 01200px 이므로, 열을 합친 나머지 는600px 경계를 벗어납니다.

      열 150px, 추가 면적 생성

    Auto

    열이 설정auto 되면 크기가 열에서 가장 긴 단어에 맞게 조정됩니다. 빈 영역은 값이 매우 짧은 셀이 있고, 다른 셀은 값이 매우 길면 가능하다. 이 경우 열의 모든 셀은 가장 긴 값이 있는 셀의 너비를 취하도록 조정됩니다.

    칼럼 자동 폭

    Percentages

    열이 백분율로 설정width 되면 그 크기는 격자 크기에 상대적으로 계산됩니다. 픽셀 단위의 너비 방식과 유사하지만, 열에 대한 반응성을 제공해 그리드가 리사이즈되면 열도 그에 맞게 크기 조정됩니다.

    • 모든 열100%의 너비가 작다면, 픽셀 단위일 때와 유사하게, 열이 덮지 않는 격자 빈 영역이 있을 수 있습니다.

      열 비율 100% 미만

    • 만약 전체 너비가 정확100% 히 맞으면, 열들이 격자의 모든 공간을 채웁니다.

      칼럼 퍼센트 100%

    • 사용자가 열을 볼 수 있을 만큼 전체 너비100%가 초과되면, 수평 스크롤바가 렌더링됩니다.

      열 백분율 100%보다 큰 것

    • 열이 백분율로 설정되고 그리드가 로width 설정되어 있다면, 각 열에 적용됩니다null​width.136px 그 이유는 열이 그리드에 비해 상대적으로 크기를 조절할 수 없기 때문입니다. 격자는 자기 자신이width 없고, 내용물이 크기를 조절width 하는null 데 의존하기 때문입니다. 다음 예시에서 6열 모두 다음과width 같이 설정되었습니다50%:

      열의 격자 비율 너비가 null

    Grid Cell Spacing Control

    ​IgxGrid는 크기 설정에 따라 내부 간격을 자동으로 조정합니다. 간격 제어를 위한 CSS 사용자 정의 속성을 사용하여 그리드 머리글 및 본문 셀의 여백과 여백을 추가로 사용자 정의할 수 있습니다.

    Global Grid Spacing

    응용 프로그램의 모든 그리드 셀에서 간격을 줄이거나 늘리려면:

    /* Reduce all grid spacing by 20% */
igx-grid {
    --ig-spacing: 0.8;
}

/* Increase spacing for better touch accessibility */
igx-grid {
    --ig-spacing: 1.2;
}

    Grid-Specific Spacing

    특정 그리드 인스턴스의 간격을 조정하려면:

    /* Make a particular grid more compact */
.my-compact-grid {
    --ig-spacing: 0.6;
}

/* Give a specific grid more breathing room */
.my-spacious-grid {
    --ig-spacing: 1.4;
}

    Directional Spacing Control

    수평 및 수직 간격을 독립적으로 제어할 수 있습니다.

    /* Reduce only horizontal spacing (left/right padding) */
.my-grid {
    --ig-spacing-inline: 0.5;
    --ig-spacing-block: 1.0; /* Keep vertical spacing normal */
}

/* Adjust vertical spacing for tighter row spacing */
.my-grid {
    --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */
    --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */
}

    Size-Specific Spacing

    그리드의 디스플레이 밀도에 따라 다양한 간격 승수를 적용할 수 있습니다.

    .my-grid {
    /* Compact density gets very tight spacing */
    --ig-spacing-small: 0.5;

    /* Medium density uses normal spacing */
    --ig-spacing-medium: 1.0;

    /* Comfortable density gets extra spacing */
    --ig-spacing-large: 1.3;
}

    Header vs Body Cell Spacing

    간격 속성은 헤더 및 본문 셀 모두에 영향을 주지만 필요한 경우 구체적으로 타겟팅할 수 있습니다.

    /* Reduce padding in header cells specifically */
.my-grid igx-grid-header {
    --ig-spacing: 0.7;
}

/* Adjust spacing in data cells */
.my-grid igx-grid-cell {
    --ig-spacing: 0.9;
}
    Note

    이러한 간격 조정은 그리드의 디스플레이 밀도와 함께 작동합니다. 간격 승수는 그리드가 컴팩트, 아늑 또는 편안한 밀도 모드에 있는지 여부에 따라 이미 결정된 기본 간격 값에 적용됩니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.