web-dev-qa-db-ja.com

Webデザイングリッドを作成する数学？

独自のグリッドレイアウトがあり、Webサイト用に複数の列デザインを作成しています。同一のガター空間で異なる列デザインを作成するために従うことができる式はありますか、つまりマージン？

ほとんどは似ていますが（試行錯誤を経て）、一部はピクセルがずれているため、ピクセルを完璧にすることを検討しています。

htmlcssweb-developmentgrid
3
Twinborn

Sdleihssirhcの説明に基づいて、外部溝なし：

columnWidth = (layoutWidth + Gutter)/columns - Gutter

外側の溝がある場合：

columnWidth = (layoutWidth - Gutter)/columns - Gutter

ただし、独自のグリッドデザインを使用する場合は、単純に追加する方が簡単です。例：

columns = 3
columnWidth = 280px
Gutter = 50px
gutters = 2
layoutWidth = 3*280px + 2*50px
  = 840px + 100px
  = 940px

または、溝なしで列から構築し、溝を差し引くだけです：

layoutWidth = 960px
columns = 3
_columnWidth = 320px
gutters = 30px
columnWidth = 320px - 30px*(4/3)
  = 320px - 40px
  = 280px

この方法では、293.33333333pxのような奇妙な数字を取得しません。

4
Lèse majesté

次のCSSコードを使用します。

/* no media query necessary */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap:1rem;
    // nothing about rows
    }

.item {
    // nothing about item placement
    }

minmax(100pxを希望の設定に調整します（必要な最小の列幅は？）。 CSSコードは残りを実行します（すべての計算、指定された幅にできるだけ多くの項目を収め、必要に応じて追加の行を自動的に追加します）。特定の場所を割り当てる必要はありません。.container内のすべてがシステムによって配置されます。とてもかっこいい。

私はこの方法を Jen Simmon's Labs 彼女の1つ Layout Land Video's から学びました。

0
elbrant