Как ограничить ширину контейнера сетки, если есть несколько элементов, но растянуть, чтобы заполнить родительский элемент, если их много? - PullRequest
Новая
       3

Как ограничить ширину контейнера сетки, если есть несколько элементов, но растянуть, чтобы заполнить родительский элемент, если их много?

0 голосов
/ 22 февраля 2020

У меня есть кнопка, которая добавляет элементы в сетку при нажатии, на данный момент она выглядит так:

enter image description here

Как видите, контейнер сетки растянут на полную ширину ... но я хочу, чтобы он был такой же ширины, как кнопка, и растягивался только при добавлении большего количества элементов, например:

enter image description here

возможно ли это с сеткой CSS? 

document.querySelector('#add').addEventListener('click', function() {
	document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 20px;
  
  background: #777;
  padding: 20px;
}

.item {
  height: 100px;
  background: white;
}

#add {
  width: 100px;
  height: 100px;
  
  background: #333;
  color: white;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  
}
<div class="grid">
  <div id="add">+</div>
</div>

1 Ответ

0 голосов
/ 22 февраля 2020

Вы можете приблизить это, используя flexbox: 

document.querySelector('#add').addEventListener('click', function() {
	document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
  display: flex;
  flex-wrap:wrap;
  max-width:max-content; /* This will limit the container */
  
  align-items: center;
  background: #777;
  padding:10px;
}
/* This is a hack to limit the grow effect*/
.grid:after {
  content:"";
  flex-grow:999;
}
/**/
.item {
  height: 100px;
  background: white;
  flex-grow:1;
  width:100px;
  margin:10px;
}

#add {
  width: 100px;
  height: 100px;
  
  background: #333;
  color: white;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  
}
<div class="grid">
  <div id="add">+</div>
</div>

Или вы считаете JS, поскольку вы уже используете JS: 

var i=1;
document.querySelector('#add').addEventListener('click', function() {
  document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
  i++;
  document.querySelector('.grid').style.maxWidth=(i*100 + (i-1)*20)+'px';
});
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 20px;
  background: #777;
  padding: 20px;
  max-width:100px;
}

.item {
  height: 100px;
  background: white;
}

#add {
  width: 100px;
  height: 100px;
  background: #333;
  color: white;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
<div class="grid">
  <div id="add">+</div>
</div>
...