【问题标题】：Make all column widths equal to the length of the widest column使所有列宽等于最宽列的长度
【发布时间】：2020-01-09 15:08:52
【问题描述】：

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

现在我有下面的 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>

【问题讨论】：

你不能。这在 CSS-Grid 中是不可能的。你需要 javascript。

标签： html css css-grid

【解决方案1】：

jquery解决方案

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

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

为所有项目设置它

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

检查 sn-p：

$(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>

【讨论】：