Могу ли я иметь CSS-сетки с динамическим количеством ячеек / строк?

Что я хочу сделать, это сделать CSS-сетку с динамическим числом ячеек. Для простоты предположим, что в строке всегда будет четыре ячейки. Могу ли я указать сетку с таким динамическим числом строк?

Чтобы упростить эту задачу, вот реализация Flexbox:

const COLORS = [
  '#FE9',
  '#9AF',
  '#F9A',
  "#AFA",
  "#FA7"
];

function addItem(container, template) {
  let color = COLORS[_.random(COLORS.length - 1)];
  let num = _.random(10000);
  
  container.append(Mustache.render(template, { color, num }));
}

$(() => {
  const tmpl = $('#item_template').html()
  const container = $('#app');
  
  for(let i=0; i<5; i++) { addItem(container, tmpl); }
  
  $('#add_el').click(() => {
    addItem(container, tmpl);
  })
  
  container.on('click', '.del_el', (e) => {
    $(e.target).closest('.item').remove();
  });
});
.container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.container .item {
  flex: 0 0 calc(25% - 1em);
  min-height: 120px;
  margin: 0.25em 0.5em;
}



PS Видимо, я не был достаточно ясен в первый раз ... Я хочу воссоздать этот эффект, используя последнюю CSS Grid Layout.

30
задан Andry 28 June 2019 в 21:41
поделиться