html - 使所有列宽等于最宽列的长度

Question

我正在尝试使用 max-content grid-template-columns 的选项以这样的方式全部 我的列具有网格中最宽单元格的宽度。列数需要保持动态。

现在我有下面的 CSS 和 HTML。您可以看到只有第一列的宽度取决于我的网格中最宽的单元格(单元格 1)。因此，在所需的结果中，所有列都应具有单元格 1 的宽度。有人能告诉我如何获得具有动态列数和列宽的网格，该网格取决于网格中最大的单元格吗？

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
  grid-gap: 5px;
}

.item {
  background: yellow;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1 I am a very very wide cell</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Answer 1

jQuery解决方案

获取所有元素的最大宽度:

var maxWWidth =Math.max.apply(Math, $('.item').map(function(){ return $(this).width(); }).get());

为所有元素设置它

$('.item').width(maxWWidth);

检查片段:

$(function(){
var maxWWidth =Math.max.apply(Math, $('.item').map(function(){ return $(this).width(); }).get());
$('.item').width(maxWWidth);
});

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
  grid-gap: 5px;
}

.item {
  background: yellow;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item">1 I am a very very wide cell</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>