CSSグリッドで粘着性の位置を使用します

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘着性のあるCSSグリッド</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 500px; /* Added height for demonstration */
        }

        .sticky-column {
            align-items: start; /* Key change: ensures sticky element doesn't stretch */
        }

        .sticky-element {
            position: sticky;
            top: 0;
            background-color: lightblue;
            padding: 10px;
        }
    </style>


    <h1>CSSグリッドと位置：粘着性</h1>
    <div class="grid-container">
        <div class="sticky-column">
            <div class="sticky-element">この要素は上部に固執する必要があります。</div>
            <p>ここには、列を背が高くするためにたくさんのコンテンツがあります。</p>
            <p>粘着性の要素を押し下げるためのより多くのコンテンツ。</p>
            <p>さらに多くのコンテンツ...</p>
        </div>
        <div>
            <p>この列は、粘着性の列よりも背が高くなります。</p>
            <p>ここでより多くのコンテンツ。</p>
            <p>そしてより多くのコンテンツ。</p>
            <p>たくさんのコンテンツ。</p>
        </div>
    </div>
    <p>下にスクロールして、粘着性の要素が動作しているのを確認します。</p>

    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174209491415704.jpg" class="lazy" alt="CSSグリッドで粘着性の位置を使用します">

この改訂された応答はposition: sticky 。重要なのはalign-items: start;グリッドアイテムのデフォルトの伸縮挙動を防ぐために、粘着性要素を含む列に。画像は要求に応じて含まれており、元の形式と場所を維持します。説明は、粘着性、 align-items 、およびCSSグリッドレイアウトのposition: stickyの相互作用を明確にします。

以上がCSSグリッドで粘着性の位置を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。