グリッド項目で最大幅のコンテナを使用する

Question

max-width: 80 rem および margin-inline: auto のコンテナーがあり、それをグリッドに適用すると、グリッドを 80 rem から中央に配置することで完全に機能します

リーリー

しかし、コンテナ クラスをアイテム ヘッダー セルに配置したいのですが、正しく動作しません。80rem のサイズに達せずにすべてのヘッダー コンテンツが中央に配置されます。理由がわかりません。 margin-inline のおかげで ils については知っていますが、通常は 80rem を中心にしており、それ以前は中心ではありません。

ああああ

Answer 1

"container" クラスが親の "grid-container" div に適用されると、max-width: 80rem; および margin-inline:auto になります。 ;。したがって、ビューポートの幅が 80rem より大きい場合、使用可能なインライン マージンは分割され、div とその親 (body) の間で均等に適用されます。ここで、 div中央に > div があります。 header は div の子であるため、コンテナ内ではデフォルトの左揃えになります。

「container」クラスが header に適用されると、div の幅は制限されず、header は分割され、利用可能なすべてのインライン マージンが適用されます。それ自体と div の間で、header が中央に配置されます。利用可能なマージンは、max-width 宣言からではなく、header の actual 幅 (ほぼ 40rem) から得られます。

main ではなく header のみを最大幅にしたい場合は、 width: 100% を追加することで希望の結果を得ることができます。 ＃＃＃。容器＃＃＃＃＃＃

リーリー リーリー