具有多级组的CSS网格布局2 * 3

Question

我尝试使用CSS网格布局创建一个具有未定义行数（有时为2，有时为3）的两列布局[params - rendering]。

渲染列具有特定的背景，与行数无关，但行之间的行高相等。我想我需要另外做一个标签。

我告诉你这个布局的截图。这是我能给出的更好的例子。粉色框是网格布局。对于“渲染”列，我有一个可以在CSS中创建的特定背景（白色和阴影）。我不想用它来拍照。

我想要做的就是这个例子隐式命名网格线：https://gridbyexample.com/examples/example22/

Answer 1

不要指定行高，因为默认情况下会使用自动高度创建行高。添加带有背景的绝对定位的伪元素，以向右列添加背景并保留元素自动放置。

＆＃13;

＆＃13;

.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); 
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

谢谢大家的帮助！