사용자 정의 속성 및 크기 조정 가능한 요소가 포함된 동적 그리드 레이아웃(@properties)

CodePen에서 복사한 정보:

열과 행에 대한 사용자 정의 속성을 사용하는 그리드입니다. 또한 간단한 드래그 핸들을 사용하여 드래그하여 크기를 조정하는 기능도 있습니다. 크기 조정은 그리드 범위에 맞춰집니다.

투명성을 위해 브라우저 지원 기준 상태가 추가되었습니다.

---

다음은 주요 부분에 코드 블록이 추가된 DEV.to의 수정된 버전입니다.

---

사용자 정의 속성과 크기 조정 가능한 요소가 있는 그리드

안녕하세요, DEV 커뮤니티 여러분! ?

최근 CSS 그리드를 실험하고 있는데 재미있는 프로젝트인 맞춤 속성과 크기 조정 가능한 요소가 포함된 그리드를 공유하고 싶습니다. 이 펜은 Bento 스타일의 그리드를 만들기 위한 시도로 시작되었지만 사용자 정의 가능한 그리드 치수와 드래그 가능한 크기 조정 가능한 요소를 특징으로 하는 더욱 역동적인 펜으로 발전했습니다. 확장할 여지는 있지만(드래그하여 재정렬이 다음 목록입니다!) 이 설정으로 이미 가능한 기능이 매우 기대됩니다.

분해해봅시다! ?

---

?️ 작동 원리

@property

@property at-rule을 사용하여 유형 안전성과 제어 상속을 추가하는 사용자 정의 속성을 정의했습니다. 다음은 프로젝트의 예입니다.

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --col-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

@property --row-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

이러한 속성을 사용하면 CSS 또는 JavaScript를 통해 최소한의 노력으로 그리드 레이아웃을 동적으로 조정할 수 있습니다. 예를 들어 다음을 사용하여 그리드 구조를 설정할 수 있습니다.

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
}

드래그하여 크기 조정

각 그리드 요소에는 사용자가 요소를 그리드에 맞추면서 크기를 조정할 수 있는 드래그 가능한 모서리 핸들이 있습니다. 드래그 핸들의 스타일은 다음과 같습니다.

.grid-element .drag-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: skyblue;
  border-radius: 50%;
  cursor: nwse-resize;
}

크기 조정 로직은 JavaScript로 구현되어 요소의 크기를 그리드 범위에 맞춥니다. 다음은 크기 조정 작동 방식에 대한 간단한 스니펫입니다.

dragHandle.addEventListener('mousedown', (event) => {
  const startX = event.clientX;
  const startY = event.clientY;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // Calculate new spans based on the grid dimensions
    const colSpan = Math.max(1, Math.round(deltaX / gridCellWidth));
    const rowSpan = Math.max(1, Math.round(deltaY / gridCellHeight));

    gridElement.style.gridColumnEnd = `span ${colSpan}`;
    gridElement.style.gridRowEnd = `span ${rowSpan}`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

열 범위 및 행 범위

사용자 정의 속성 --col-span 및 --row-span은 각 그리드 항목의 기본 크기를 제어합니다. 적용 방법은 다음과 같습니다.

.grid-element {
  grid-column: span var(--col-span);
  grid-row: span var(--row-span);
}

이 접근 방식을 사용하면 스타일 지정이 단순화되고 프로그래밍 방식으로 요소를 동적으로 추가하거나 크기를 조정할 수 있습니다.

---

직접 테스트해보세요!

---

? 결론

이 프로젝트는 대화형의 동적 레이아웃을 만들기 위해 가벼운 JavaScript와 결합된 최신 CSS의 강력한 기능을 보여줍니다. @property 및 CSS 그리드 기능을 사용하여 사용자 정의 및 크기 조정이 가능한 그리드 시스템을 위한 기반을 만들었습니다.

향후 계획에는 사용자가 요소를 재정렬하여 그리드를 더욱 상호 작용할 수 있도록 드래그하여 재정렬 기능을 추가하는 것이 포함됩니다.

투명성을 위해 사용된 실험적 기능에 대한 브라우저 지원을 보여주기 위해 기준 상태 요소를 포함했습니다.

---

? 자원

다음은 이 프로젝트에 사용된 CSS 기능에 대해 자세히 알아볼 수 있는 유용한 링크입니다.

• MDN: @property
• MDN: CSS 그리드 레이아웃
• MDN: 캐스케이드 레이어
• MDN: 시작 스타일
• MDN: 상대 색상: CSS에서 직접 색상 조정을 단순화합니다.
• MDN: 논리적 속성: 다국어 지원을 위해 방향에 구애받지 않는 CSS를 작성합니다.
• MDN: 컨테이너 쿼리: 뷰포트가 아닌 컨테이너 크기를 기준으로 레이아웃을 조정합니다.
• MDN: currentColor 키워드: 테두리나 배경과 같은 다른 CSS 속성에서 현재 텍스트 색상을 사용합니다.
• MDN: -web-kit-Line 클램프: 블록 요소에 표시되는 최대 줄 수를 제어합니다.
• MDN: 전환 동작 - Allow-Discrete: 전환 중에 이산 값이 어떻게 변경되는지 정의합니다.

---

추가 개선을 위한 피드백이나 아이디어를 듣고 싶습니다! 댓글로 여러분의 생각을 알려주세요. 아니면 자유롭게 펜을 포크하여 여러분만의 것으로 만들어 보세요. ?

즐거운 코딩하세요! ?✨

위 내용은 사용자 정의 속성 및 크기 조정 가능한 요소가 포함된 동적 그리드 레이아웃(@properties)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!