代码之家 › 专栏 › 技术社区 › BobtheMagicMoose

CSS网格-有一行不影响列的宽度,导致换行

css-grid css

BobtheMagicMoose · 技术社区 · 2 年前

我希望网格中的每个“单元格”都有助于列宽,除了一个特定的单元格——我希望它扩展其高度以包含(强制换行)。有办法做到这一点吗?

body{
  display:flex;
}

.grid-container{
 display: grid;
 gap: 20px;
 grid-template-columns: auto auto auto;
 .see-all{
   display: grid;
   grid-column-start:1;
   grid-column-end:4;
   grid-template-columns:subgrid;
   :nth-child(1){
     column:1;
   }
   :nth-child(2){
     column:2;
   }
   :nth-child(3){
     column:3;
   }
  }
  .other{
    grid-column: 1 / span 3;
  }
}

<body>
  <div class="grid-container">
   <div class="see-all">
      <div>Apple</div>
      <div>Banana</div>
      <div>Coconut</div>
    </div>
    <div class="see-all">
      <div>Date</div>
      <div>Eggplant</div>
      <div>Fig</div>
    </div>
    <div class="other">
This row is just too long, I was this to use the width of the column (set by other elements) to then cause this to word wrap.
    </div>
  </div>
<body>

1 回复 | 直到 2 年前

SyndRain 2 年前

这个 min-width:100%; width:0 对你们来说,这个把戏就行了。网格轨迹大小是根据其 width ,那么它的大小将根据赛道的大小重新增加,因为 min-width .

body {
  display: flex;
}

.grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: auto auto auto;
  .see-all {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-template-columns: subgrid;
     :nth-child(1) {
      column: 1;
    }
     :nth-child(2) {
      column: 2;
    }
     :nth-child(3) {
      column: 3;
    }
  }
  .other {
    grid-column: 1 / span 3;
  }
  .long-cell {
    min-width: 100%;
    width: 0;
  }
}

<body>
  <div class="grid-container">
    <div class="see-all">
      <div>Apple</div>
      <div>Banana</div>
      <div>Coconut</div>
    </div>
    <div class="see-all">
      <div>Date</div>
      <div>Eggplant</div>
      <div>Fig</div>
    </div>
    <div class="other long-cell">
      This row is just too long, I want to force the elements in this row to word wrap and not contribute to the grid
    </div>
  </div>

  <body>