두 축, 하나의 배치 모델
세로의 열과 가로의 행에 같은 논리 배치 규칙을 적용합니다. 방향 옵션은 좌표만 반전하며 입력 순서는 바꾸지 않습니다.
grid-masonry 0.3.0
입력이 같으면 결과도 같은 배치.
세로와 가로 레이아웃, 여러 레인에 걸친 항목, 실제 콘텐츠 크기 측정, 예측 가능한 상태 관리를 하나의 플랫폼 독립 Core로 제공합니다. React Web과 Browser 어댑터는 계산된 좌표를 각 렌더링 환경에 적용합니다.
Core 실행 시 의존성 0개입력 순서 유지스크롤 정책은 호스트가 결정
실시간 데모
모든 좌표는 Core가 계산합니다.
옵션을 바꾸어 보십시오. Browser 어댑터는 Core가 반환한 좌표를 화면에 적용하기만 합니다.
콘텐츠 전체 크기 반영
먼저 원본 비율로 배치한 뒤, 카드 전체를 측정한 resolvedFootprint을 Core가 정한 교차 축 크기에 맞춰 적용할 수 있습니다.
명확한 레인 배치 규칙
preferredColumn과 preferredRow는 가능한 레인을 우선하고, lockedColumn과 lockedRow는 배치할 논리 레인을 제약합니다. 항목이 차지하는 레인 수는 현재 레인 수에 맞게 조정되며 입력값은 바뀌지 않습니다.
렌더링 생명주기는 호스트가 관리
Core는 좌표를 계산하고 React와 Browser는 항목의 정체성을 유지합니다. DOM, 측정 연동, 접근성, 스크롤은 호스트 애플리케이션이 담당합니다.
구조
작은 Core, 분명한 책임 경계.
호스트의 배치 의도→Core 좌표 계산→React / Browser 적용
예약 영역, 진단, 스냅샷, 안정적 재배치, 질의, 가상화, flowTolerance는 특정 제품에 종속되지 않는 결정적 규칙으로 처리합니다. Core에는 DOM, 텍스트 RTL, 제품 정책, 스크롤 정책이 들어 있지 않습니다.
배치
여러 레인에 걸친 항목과 예약 영역
이어진 여러 레인을 차지하는 항목, 선호·고정 레인 제약, 항목을 놓을 수 없는 예약 영역, 다섯 가지 flowDistribution을 하나의 배치 규칙으로 조합합니다.
안정성
검증 가능한 상태와 재배치
체크포인트는 오래되거나 변조된 좌표를 거부합니다. 안정적 재배치는 제한된 후보를 실제 이동 거리로 비교합니다.
상태 기능 살펴보기 →관찰
질의와 진단
선형 질의와 색인을 사용하는 진행 범위 질의, 가상화 기본 기능, 선택적 구조화 진단, 이동 거리 측정을 제공합니다.
진단 기능 살펴보기 →설치
필요한 계층만 선택하십시오.
npm install grid-masonry-core
npm install grid-masonry-react react
npm install grid-masonry-browser지원 범위
책임을 분리해 동작을 예측할 수 있습니다.
dense/backfill: 현재 지원하지 않음React Native: 지원 보류DOM·텍스트 RTL: 호스트 책임스크롤 변경: 호스트 책임현재 버전: 0.3.0