カスタム プロパティとサイズ変更可能な要素を使用した動的グリッド レイアウト (@properties)

CodePen から情報をコピーしました:

列と行のカスタム プロパティを使用したグリッド。 また、単純なドラッグ ハンドルを使用して、ドラッグしてサイズを変更することもできます。 サイズ変更はグリッド スパンにスナップされます。

透明性を高めるためにブラウザ サポートのベースライン ステータスが追加されました。

---

これは、重要な部分にコード ブロックが追加された DEV.to 投稿の改訂版です:

---

カスタム プロパティとサイズ変更可能な要素を含むグリッド

DEV コミュニティの皆さん、こんにちは! ?

私は最近 CSS グリッドを試してきました。カスタム プロパティとサイズ変更可能な要素を備えたグリッド という楽しいプロジェクトを共有したいと思います。このペンは、Bento スタイルのグリッドを作成する試みとして始まりましたが、カスタマイズ可能なグリッドの寸法とドラッグ可能なサイズ変更可能な要素を備えた、より動的なものに進化しました。拡張の余地はありますが (ドラッグして並べ替える機能が私のリストの次です!)、この設定ですでに何が可能になるかに興奮しています。

詳しく見てみましょう! ?

---

⁉️ 仕組み

@プロパティ

@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);
}

このアプローチにより、スタイル設定が簡素化され、プログラムで要素を動的に追加したりサイズ変更したりすることが簡単になります。

---

自分で試してみてください!

---

?結論

このプロジェクトでは、最新の CSS と軽量の JavaScript を組み合わせて、インタラクティブで動的なレイアウトを作成する能力を紹介します。 @property と CSS グリッド機能を使用することで、カスタマイズ可能でサイズ変更可能なグリッド システムの基盤を作成しました。

将来の計画には、ユーザーが要素を並べ替えてグリッドをさらにインタラクティブにする、ドラッグして並べ替える機能の追加が含まれます。

透明性を高めるために、使用されている実験的機能のブラウザーのサポートを示すベースラインステータス要素を含めました。

---

?リソース

このプロジェクトで使用されている CSS 機能について詳しく知るために役立つリンクがいくつかあります:

• MDN: @property
• MDN: CSS グリッド レイアウト
• MDN: カスケード レイヤー
• MDN: 開始スタイル
• MDN: 相対カラー: CSS で直接カラー調整を簡素化します。
• MDN: 論理プロパティ: 多言語サポートのため、方向に依存しない CSS を記述します。
• MDN: コンテナ クエリ: ビューポートではなくコンテナのサイズに基づいてレイアウトを調整します。
• MDN: currentColor キーワード: 境界線や背景などの他の CSS プロパティで現在のテキストの色を使用します。
• MDN: -web-kit-Line Clamp: ブロック要素に表示される最大行数を制御します。
• MDN: 遷移動作 - 離散許可: 遷移中に離散値がどのように変化するかを定義します。

---

さらなる改善のためのフィードバックやアイデアをぜひお聞かせください。コメントでご意見をお聞かせください。または、お気軽にペンをフォークして自分のものにしてください。 ?

コーディングを楽しんでください! ?✨

以上がカスタム プロパティとサイズ変更可能な要素を使用した動的グリッド レイアウト (@properties)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。