Сделайте ширину всех столбцов равной длине самого широкого столбца. - PullRequest
Новая
       6

Сделайте ширину всех столбцов равной длине самого широкого столбца.

5 голосов
/ 08 января 2020

Я пытаюсь использовать параметр max-content для grid-template-columns таким образом, чтобы все мои столбцы имели ширину самой широкой ячейки в сетке. Количество столбцов должно оставаться динамическим c.

Прямо сейчас у меня есть CSS и HTML ниже. Вы можете видеть, что только ширина первого столбца зависит от самой широкой ячейки в моей сетке (ячейка 1). Таким образом, в желаемом результате все столбцы должны иметь ширину ячейки 1. Может ли кто-нибудь сказать мне, как получить сетку с динамическим числом столбцов c и шириной столбца, которая зависит от самой большой ячейки в моей сетке? 

.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>

1 Ответ

4 голосов
/ 08 января 2020

Jquery решение

  1. получить максимальную ширину всех элементов: 
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>
...