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

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解决方案

1. 获取所有项目的最大宽度：

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

2. 为所有项目设置它

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

检查片段：

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