CSSでモダンなデザインを構築するためのヒント：整数とその他の単位を効果的に活用する

グリッドレイアウト

grid-template-columns と grid-template-rows：グリッド列と行の幅をピクセル単位で定義します。これらの値は、fr や minmax() などのフレックスレイアウト単位と組み合わせて使用できます。
grid-column-gap と grid-row-gap：グリッドアイテム間の水平方向および垂直方向の隙間をピクセル単位で設定します。

要素の寸法

min-height と max-height：要素の最小高と最大高をピクセル単位で設定します。これは、要素が占める垂直方向の領域を制御するために役立ちます。
min-width と max-width：要素の最小幅と最大幅をピクセル単位で設定します。これは、要素が収まる領域を制御するために役立ちます。
width と height：要素の幅と高さをピクセル単位で設定します。

余白とパディング

padding-top、padding-right、padding-bottom、padding-left：要素内側のコンテンツ周りのパディングを上下左右個別に設定します。
margin-top、margin-right、margin-bottom、margin-left：要素の周りの余白を上下左右個別に設定します。
margin と padding：要素の周りの余白とパディングをピクセル単位で設定します。

フォント

すべてのブラウザがすべての整数値をサポートしているわけではありません。古いブラウザとの互換性を考慮する場合は、ベンダープレフィックスを使用する必要がある場合があります。
ピクセル値はデバイスのピクセル密度によって異なる場合があります。そのため、デザインをより柔軟にするために、相対的な単位（em や %）を使用することを検討してください。

この例では、グリッドレイアウトを使用して3列のグリッドを作成し、各列の幅を200ピクセル、列間の隙間を20ピクセルに設定します。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px;
}

例 2：要素の寸法

この例では、要素の幅を300ピクセル、高さを200ピクセル、余白を10ピクセルに設定します。

.element {
  width: 300px;
  height: 200px;
  margin: 10px;
}

例 3：フォント

この例では、フォントサイズを16ピクセル、行高さを1.5に設定します。

.text {
  font-size: 16px;
  line-height: 1.5;
}

例 4：境界線

この例では、要素の境界線の太さを2ピクセル、角の丸みを10ピクセルに設定します。

.box {
  border: 2px solid black;
  border-radius: 10px;
}

例 5：重ね順序

この例では、要素1を要素2の上に表示するために、要素1のz-index を要素2よりも大きい値に設定します。

.element1 {
  z-index: 10;
}

.element2 {
  z-index: 5;
}

fr：グリッドレイアウトにおける列の占有スペースの割合を表す単位。例えば、grid-template-columns: 2fr 1frの場合、左側の列は右側の列の2倍の幅になります。
%: 親要素のサイズを基準とした単位。例えば、親要素の幅が500ピクセルの場合、width: 50%は250ピクセルになります。
em：現在のフォントサイズを基準とした単位。例えば、font-size: 16pxの場合、1emは16ピクセルになります。

小数点を使用する

ピクセル値に小数点を使用することで、より細かい調整が可能になります。例えば、width: 25.5pxは、幅25.5ピクセルの要素を作成します。

calc()関数を使用する

calc()関数を使用して、数学式に基づいて値を計算することができます。例えば、width: calc(50% + 20px)は、親要素の幅の50%に20ピクセルを加えた幅の要素を作成します。

変数を使用する

CSS変数を使用して、値を名前で保存し、コード全体で再利用することができます。例えば、$gutter: 20pxと定義し、width: calc(calc(100% - 2*$gutter) / 3)とすれば、要素の幅を親要素の幅の3分の1になるように設定できます。

すべてのブラウザがすべての整数値をサポートしているわけではありません。古いブラウザとの互換性を考慮する場合は、ベンダープレフィックスを使用する必要がある場合があります。
ピクセル値はデバイスのピクセル密度によって異なる場合があります。そのため、デザインをより柔軟にするために、相対的な単位を使用することを検討してください。