1

CSS グリッドを調べていると、奇妙なことに遭遇しました。3 つの列が必要です。1 と 3 は幅が150px広く、2 は残りです。それは可能だと思いましたが、これはうまくいきませんでした：

grid-template-columns: 150px auto 150px;

だから私はこれを試しました、そしてそれはうまくいきますが、ばかげています:

grid-template-columns: 150px calc(100% - 300px) 150px;

そして、私はこの例に出くわしました: http://gridbyexample.com/examples/code/layout1.htmlは、これを使用してコンテンツ列を自動サイズにします:

grid-template-columns: 200px 40px auto 40px 200px;

それが私がしたことです！そして、彼らの例は機能しますが、私のものは機能しません!?

私のフィドルの例: http://jsfiddle.net/rudiedirkx/w5xho67w/3/ (画面が 700px 以上の場合、3 列がトリガーされます)。

私は何か愚かなことをしているに違いありませんが、違いがわかりません...

そうじゃない：

  • なぜならbody、grid
  • iframeだから
  • ラッパー（body）は固定幅ではないため（どちら100%も900px機能しません）
4

1 に答える 1

1

探しているのは端数単位です。中央の列を に設定します1fr。これは、他の 2 つの列を考慮すると残りのスペースの 1/1 を占めることを意味します。これは (基本的に) . を持つフレックスボックス フレックス ユニットのように機能しflex basis: 0ます。

grid-template-columns: 150px 1fr 150px;

対照的に、auto値はコンテンツに応じてサイズ変更されるため、空の中央の列 (たとえば) はスペースを占有しません。

グリッド レイアウト モジュールの仕組みについてのシリーズを書き始めました。そこには、グリッド トラックのサイズ変更に関する部分があります (役立つかもしれません)。:-)

于 2015-10-18T15:54:12.583 に答える