1 つの項目が最初の列の高さ全体にわたる 3 列のグリッドレイアウトを実装します。

Question

CSSで1列のコンテンツをオフセットしたいと考えています。以下のようにするだけで簡単だと思います。これにより、上部はオフセットされますが、2 番目の列が最初の列の高さ (マージンを含む) と一致します。最初の列をオフセットするには他にどのようにすればよいでしょうか? https://jsbin.com/delobaluga/edit?html,css,output.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;}.grid.item

P粉790819727 · Answer

2 番目の列の高さに影響を与えずに最初の列をオフセットしたい場合は、最初の列でマージンの代わりにパディングを使用できます。パディングは要素のコンテンツ領域に影響し、マージンは周囲の領域に影響します。そのため、最初の列にパディングを追加すると、そのサイズが増加し、その中のコンテンツがオフセットされますが、2 番目の列の高さには影響しません。。

これはこれで改善されたコードです:

リーリー

1 つの項目が最初の列の高さ全体にわたる 3 列のグリッド レイアウトを実装します。

全員に返信(1)返信します

1 つの項目が最初の列の高さ全体にわたる 3 列のグリッドレイアウトを実装します。