根据项目内容本身使网格子项目缩小或增长

Question

我做了一个两列两行的简单网格，很简单。但里面的内容却不是。

我在这里添加了 sn-p，当我将 grid-template-rows 与 auto 或 4 1fr 一起使用时，它会根据最大部分给出高度相同的部分。

我想要的是在内容较少时缩小的 4 个部分，就像部分只有一个数字一样。

为了澄清更多，我希望这些具有绿色背景和非常小的内容的部分缩小以仅适合内容。

更新 1：我添加了一张照片来说明我想用这个实现什么。您会注意到左右两边的行根据内容对齐。

浅蓝色部分会扩大其内容以适应内容，蓝色背景部分会扩大，因为浅绿色背景部分更大。

我希望这些部分仅在只有内容时扩展，但我希望两者一起扩展或在没有内容时变小。

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid-section{
  background: blue;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.grid-section div:nth-child(1){
  background: yellow;
}

.grid-section div:nth-child(2){
  background: green;
}

<section>
  
  <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    1
  </div>
  </div>
  
  <div class="grid-section">
     <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
     <div>
  2
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
  </div>
  
</section>

Answer 1

我只是用最大内容设置高度。所以高度会动态适应内容。

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 20px;
}

.grid-section{
  background: blue;
  display: grid;
  grid-template-rows:  repeat( 4, minmax(1px, 1fr) );
}

.grid-section div:nth-child(1){
  background: yellow;
}

.grid-section div:nth-child(2){
  background: green;
  height: max-content
}

<section>
  
  <div class="grid-section">
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
     <div>
    1
  </div>
  </div>
  
  <div class="grid-section">
     <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
     <div>
  2
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
  </div>
  
</section>

Answer 2

这是您希望达到的结果吗？简单地在.grid-section 中使用grid-auto-rows: auto;。更多关于grid-auto-rows。

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid-section{
  background: blue;
  display: grid;
  grid-auto-rows: auto; /* replaced grid-template-rows with this */
}

.grid-section div:nth-child(1){
  background: yellow;
}

.grid-section div:nth-child(2){
  background: green;
}

<section>
  
  <div class="grid-section">
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
     <div>
    1
  </div>
  </div>
  
  <div class="grid-section">
     <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
     <div>
  2
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
     <div>
    1
  </div>
  </div>
  
    <div class="grid-section">
     <div>
    1
  </div>
     <div>
    1
  </div>
     <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>
     <div>
    1
  </div>
  </div>
  
</section>

更新

如果您需要每行中的左右块具有相同的高度 - 您必须使用一个网格元素而不是两个分开的网格元素。这是使用 CSS 同步每个行高的唯一方法。用grid-auto-rows: auto;制作了一个网格

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 1px;
}

section div {
  background: cyan;
}

<section>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries
  </div>
  <div>
    1
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries
  </div>
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    1
  </div>
</section>