CSSグリッドレイアウト2 * 3（マルチレベルグループ）

Question

CSS Grid Layoutを使用して、未定義の行数（時には2、場合によっては3）で2列レイアウト[params-rendering]を作成しようとしています。

レンダー列は、行数に関係なく特定の背景を持ちますが、列の高さは列間で等しくなります。私はそれをするために別のタグを置く必要があると思います。

私はあなたにこのレイアウトのスクリーンショットを教えてください。それは私が与えることができるより良い例です。ピンクボックスはグリッドレイアウトです。 「レンダリング」の列には、CSSで作成できる特定の背景（白と影）があります。私はそれのために絵を使いたくない。

それは私が何をしたいらしいです。この例のように暗黙の名前のグリッド線です：彼らはデフォルトで作成されるため、行の高さを指定しないでくださいhttps://gridbyexample.com/examples/example22/

Answer 1

自動高さで。右の列に背景を追加し、要素の自動配置を保持するために、バックグラウンドで絶対配置された疑似要素を追加します。

.grid { 
 
    box-sizing: border-box; 
 
    display: grid; 
 
    
 
    /* get 20% and remaining width for columns */ 
 
    grid-template-columns: 20% 1fr; 
 
    
 
    /* gap between rows and columns */ 
 
    grid-gap: 15px; 
 
    
 
    /* just styles for demo */ 
 
    color: #ada0b9; 
 
    padding: 40px; 
 
    
 
    position: relative; 
 
} 
 

 
.grid__item { 
 
    padding: 30px; 
 
} 
 

 
.grid__item--params { 
 
    background-color: #e8d7eb; 
 
} 
 

 
.grid__item--render { 
 
    background-color: #f8e7fb; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    position: absolute; 
 
    
 
    /* also add padding to positioning values */ 
 
    left: calc(20% + 40px); 
 
    right: 40px; 
 
    bottom: 40px; 
 
    top: 40px; 
 
    
 
    /* add negative to prevent content overlapping */ 
 
    z-index: -1; 
 
    
 
    /* add needed background styles here */ 
 
    background: lime none; 
 
    box-shadow: 0 8px 20px rgba(0,0,0,.1); 
 
}

<div class="grid"> 
 
    <div class="grid__item grid__item--params">Params#1</div> 
 
    <div class="grid__item grid__item--render">Render#1</div> 
 
    <div class="grid__item grid__item--params">Params#2</div> 
 
    <div class="grid__item grid__item--render">Render#2</div> 
 
    <div class="grid__item grid__item--params">Params#3</div> 
 
    <div class="grid__item grid__item--render">Render#3</div> 
 
</div>

Answer 2

私は最終的に方法を見つけたが、私は私のコードでは本当にないんです。 グリッドの各要素にカウンターモディファイアを追加して適切なスペースに配置する必要がありました。

HTML：

<main class="render render--2 container"> 
    <div class="render__view--bg"></div> 

    <div class="render__params render__params--1"> 
     <span class="font-name">Maven Pro</span> 
    </div> 

    <div class="render__view render__view--1"> 
     <h1>Lorem ipsum dolor sit amet consectetur adipiscing elit.</h1> </div> 


    <div class="render__params render__params--2"> 
     <span class="font-name">Quintessential</span> 
    </div> 

    <div class="render__view render__view--2"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas vestibulum mauris, id accumsan dolor. Fusce interdum sit amet purus et imperdiet. Nulla porta tortor ante, a cursus nisi varius vitae. Maecenas eu faucibus velit. Sed varius nulla ac facilisis tempus. Vestibulum aliquet varius consequat. Nullam augue dui, auctor non vehicula quis, eleifend et ex. Curabitur sit amet purus rutrum, rhoncus est non, ornare ex. Aenean lobortis nibh ut ante vestibulum ornare. Maecenas posuere odio nec mollis consectetur. Quisque non leo nec quam congue commodo eu non est.</p> 

<p>In sit amet nisi urna. Integer vehicula massa quis risus tristique, eu condimentum metus fringilla. Nunc ex ipsum, suscipit eget ullamcorper ut, faucibus non risus. Fusce consectetur risus nec tellus malesuada posuere. Curabitur quam libero, efficitur at malesuada a, venenatis in lectus. Ut aliquam auctor ullamcorper. In pretium, elit vel mollis ultrices, sem leo dignissim turpis, in blandit nunc dui et leo.</p> 

<p>Suspendisse potenti. Sed sit amet velit id nunc placerat aliquet et in quam. Praesent eu laoreet felis. Nulla non nibh libero. Nulla in tellus ac mauris lacinia vulputate ac vitae mi. Pellentesque eleifend non massa id pellentesque. Nam fermentum, ante eget consectetur sodales, dui augue faucibus justo, eu posuere est sapien eu sapien.</p> </div> 

</main> 

とCSS：

//CSS Grid 
.render{ 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: 20% 80%; 

    &.render--2{ 
     grid-template-rows: auto auto; 
     grid-template-areas: 
    "params view" 
    "params view"; 
    } 

    &.render--3{ 
     grid-template-rows: auto auto auto; 
     grid-template-areas: 
    "params view" 
    "params view" 
    "params view"; 
    } 

    .render__view--bg{ 
     z-index: 1; 
     grid-column: view-start/view-end; 
    grid-row: view 1/view 3; 
     background: #fff none; 
     box-shadow: 0 8px 20px rgba(0,0,0,.1); 
    } 

    .render__params, 
    .render__view{ 
     padding: 16px; 
     z-index: 2; 
    } 

    .render__params{ 
     grid-column: params/span 1; 

    &--1{ 
      grid-row: params 1; 
    } 

    &--2{ 
      grid-row: params 2; 
    } 

    &--3{ 
      grid-row: params 3; 
    } 
    } 

    .render__view{ 
     grid-column: view/span 1; 

     &--1{ 
      grid-row: view 1; 
    } 

    &--2{ 
      grid-row: view 2; 
    } 

    &--3{ 
      grid-row: view 3; 
    } 
    } 
} 

はここCodepen preview

はあなたの助けありがとうございましたです！