CSS 그리드와 함께 선택 목록 항목을 그룹화합니다

사용자 경험을 향상시키기 위해 CSS 그리드를 통해 선택한 목록 항목을 영리하게 그룹화하십시오! 선택된 항목 그룹화는 사용자가 선택한 및 선택되지 않은 항목을 빠르게 구별하는 데 도움이되는 일반적인 설계 전략입니다. 예를 들어, 할 일 목록에서 완성 된 항목이 위쪽으로 이동하여 사용자가 나머지 작업에 더 쉽게 집중할 수 있습니다.

우리는 비슷한 그룹화 UI를 설계 할 것입니다. 선택한 항목의 간단한 재 배열과 달리 CSS 그리드를 사용하여 선택한 항목을 수평으로 레이아웃하여 선택한 항목과 선택한 항목을 더욱 구별합니다.

우리는 두 가지 방법을 탐색 할 것입니다. 하나는 선택한 항목이 그리드 컨테이너의 경계를 초과하지 않는 상황에 적합하여 다른 하나는 안정적인 레이아웃을 보장합니다.

두 메소드의 HTML 코드는 동일합니다.

코드는 정렬되지 않은 목록으로 구성됩니다 (). CSS 그리드 속성이 프로젝트 레이아웃을 결정하므로 요소를 추가로 랩핑 할 필요가 없습니다. 추가 랩핑을 피하고 랩핑하기 위해 암시 적

요소를 사용하지만 명시 적 태그는 일반적으로 보조 기술에 의해 더 지원됩니다.

auto-fill 메소드 1 : 사용 span

목록 항목을 포함하는 요소는 그리드 컨테이너로 만들기 위해

로 설정됩니다. 그리드 행과 열 사이에서 14px와 10px의 간격을 설정합니다. 그리드 함량은 수평으로 중앙에 정렬됩니다. 속성은 그리드에서 열의 크기를 지정합니다. 초기 상태에서 모든 항목은 단일 열에 있습니다. 항목이 선택되면 첫 번째 행으로 이동하고 선택한 각 항목은 열을 차지합니다. 핵심은 값에 있습니다.

• ?
  Bento
• ?
  Dangos

<ul></ul> 값은 함수의 반복 수에 사용됩니다. 열이 반복되고 각 열에는 <label></label> (예에서 40px)에 주어진 트랙 크기가 있으며 그리드 컨테이너의 경계에 적응할 수 있습니다.

목록 항목의 초기 상태가 단일 열인지 확인합니다.

항목이 선택되면 ( 선택기를 사용하십시오 : 이로 인해 선택된 항목이 목록 상단으로 그룹화되어 가로로 배열됩니다. auto-fill 메소드 2 : 키워드 를 사용하십시오 이 메소드에는

속성이 필요하지 않습니다. 새로운

위 내용은 CSS 그리드와 함께 선택 목록 항목을 그룹화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!