CSSグリッドを使用して自己中心の完全幅要素を作成します

時々、アイデアはあなたがなぜそれを考えたことがないのアイデアを持っているので、ハードを打つ.CSSグリッドcreating new types of layouts . また、古いデザインパターンのコードを簡素化するのも素晴らしいです.
私は、フル幅の背景色とストライプの内側のテキストの中心的な列を作成していたときにアイデアが私を襲った.
伝統的に、これは追加を加えることで解決されるでしょう<div> マークアップで.HTMLはこのようになります.

<section class="stripe">
    <div class="stripe__content">
        <h1>Hello Stripe world</h1>
        <p>More stripe content can go here ...</p>
    </div>
</section>

我々は外部を使用する<section> 背景色とインテリアを適用するには<div> サイズとコンテンツを中心に.これは決してマークアップの危機ではない.CSSは比較的きれいです.

.stripe {
    background-color: lavender;
    padding: 2rem 0;
}
.stripe__content {
    width: 90vw;
    max-width: 1200px;
    margin: auto;
}

これが大きな違反でなかったので、私はこの目的のためにCSSグリッドを利用することについて決して考えませんでした.私はグリッドの他のデザインの内側にフル幅のストライプを作成するために使用しているが、この単純な何かのために.
このアプリケーションの稲妻は完全にガードをキャッチ.たとえプロパティがgrid-template-columns , 我々は、単一の列のためにそれを使用することができます.とのペアjustify-content そして、パッドの小さなタッチ、およびVoila!
色のストライプは、幅の追加マークアップなしのコンテンツの設定を制限!

<section class="stripe">
    <h1>Hello Stripe world</h1>
    <p>More stripe content can go here ...</p>
</section>

.stripe {
    display: grid;
    grid-template-columns: minmax(auto, 1200px);
    justify-content: center;

    background-color: lavender;
    padding: 2rem 1rem;
}

このメソッドは、グリッドの1つの列を作成します.の最小サイズauto その内容と1200 pxの最大サイズに基づいて縮小することを許可します.適切なサイズの要素が作成されます.使用するjustify-content 代わりにauto 余白.この方法では、我々のモバイル幅のための左/右パディングが必要です.
ボックスモデルの観点から、これは良い意味になります.パディングは内部の間隔です.私たちの古い方法では、我々は常に少しハッと感じているマージンを使用している.
私はこのユースケースについて考えたことがありませんでしたが、それが私に起こったとき、それはとても意味をなしました.私たちがグリッドが我々の主なレイアウトメカニズムの1つである将来に近づくように、我々はこれのようなより多くのアプリケーションを見ます.
グリッドは、複雑なレイアウトのためだけではない、それはまた、弾力性のあるシンプルなレイアウトを作るためのものです.どのようないくつかの他のレイアウトは、一見すると、グリッドを使用するように見えることはありませんが、グリッドが良いでしょうか?

ブライアンと日まで滞在

あなたが私が生産しているすべてのコンテンツを最新の状態にしたい場合は、同様に他のプラットフォームでもここに私に従うことを確認してください.

YouTube for my videos

My Patreon for early updates

Watch or request a Design or Code Review at peerreviews.dev