Question

我有2列复杂的网格布局，示例只是其中的一部分。我的完整代码与此类似。有没有办法，使用CSS网格，绿色框将始终停留在红色框附近，而没有任何固定大小。如果右列项目具有更多的内容，那么左列项目我想让块D和块B彼此相邻且没有空格。

.container {
  display: grid;
  grid-template-areas: "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}

<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </div>
</div>

Answer 1

与grid-template-areas一起修补。这是一个例子。

.container {
  display: grid;
  grid-template-areas: " d c "
                       " b c "
                       " . c "
                       " . a "
                       " . a "
                       " . a ";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}

.a {
  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */
}

<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
  </div>
</div>

Answer 2

您可以使用
grid-auto-rows：容器类中的minmax（100px，auto）并删除
align-items：基线；这可以帮助您

.container {
  display: grid;
  grid-template-areas:  "d c" "b a";
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  /*align-items: baseline;*/
  grid-auto-rows: minmax(100px, auto);
}

.a {

  grid-area: a;
  background-color: blue;
}

.b {
  grid-area: b;
  background-color: green;
}

.c {
  grid-area: c;
  background-color: purple;
}

.d {
  grid-area: d;
  background-color: red;
}

.block {
  /* height:300px; */

<!DOCTYPE html>
<html>
<head>
<title>Web Page Design</title>
</head>
<body>
<div class="container">
  <div class="block a">
    Lorem ipsum dolor sit amet.
    
  </div>
  <div class="block b">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
    
  </div>
  <div class="block c">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
  <div class="block d">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis laudantium sit, pariatur omnis quibusdam?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod ea aperiam consequatur fugiat libero voluptate accusantium amet corporis laborum in, quae ratione, atque assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
    enim labore, eaque quidem repellendus atque!
  </div>
</div>
</body>
</html>

固定网格列，而其他更改

2 个答案: