framework - css grid vs flexbox

¿Puedo tener grillas CSS con número dinámico de celdas/filas?

Question

Lo que quiero hacer es hacer una cuadrícula CSS con un número dinámico de celdas. Para simplificar, supongamos que siempre habrá cuatro celdas por fila. ¿Puedo especificar una cuadrícula con un número tan dinámico de filas?

Para hacerlo más fácil, aquí está la implementación de 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
</div>

<button id="add_el">Add element</button>

<template id="item_template">
  <div class="item" style="background: {{color}}">
    <p>{{ num }}</p>
    <p>
      <button class="del_el">Delete</button>
    </p>
  </div>
</template>

PS Al parecer, no estaba lo suficientemente claro la primera vez ... Quiero recrear este efecto usando el último diseño de cuadrícula de CSS.

Answer 1

¿Algo como esto?

$(document).ready(function() {
 //Prepare Element selectors
  var cssElem = $("#Dynam"), rowElem = $("#rows"), columnElem = $("#columns"), appElem = $("#app");
  var noItems = $(".item").length,defaultColumns = 4;
    
  //Init default state
  cssElem.html(".container .item {flex: 0 0 calc(" + (100 / defaultColumns) + "% - 1em);}");
  columnElem.val(defaultColumns);
  rowElem.val(Math.ceil(noItems / columnElem.val()));

  //Add listeners to change
  appElem.on("DOMSubtreeModified", function() {
    noItems = $(".item").length;
    rowElem.val(Math.ceil(noItems / columnElem.val()));
  });
  columnElem.on("change", function() {
    rowElem.val(Math.ceil(noItems / columnElem.val()));
    cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
  });
  rowElem.on("change", function() {
    columnElem.val(Math.ceil(noItems / rowElem.val()));
    cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
  });
});

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 {
  min-height: 120px;
  margin: 0.25em 0.5em;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="Dynam"></style>
<button id="add_el">Add element</button> rows:
<input id="rows" /> columns:<input id="columns" />

<div id="app" class="container">
</div>

<template id="item_template">
  <div class="item" style="background: {{color}}">
    <p>{{ num }}</p>
    <p>
      <button class="del_el">Delete</button>
    </p>
  </div>
</template>

Answer 2

Bien, después de leer la referencia de MDN, ¡encontré la respuesta! La clave para filas dinámicas (o columnas) es la propiedad de repeat .

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: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fill, 120px);
  grid-row-gap: .5em;
  grid-column-gap: 1em;
}

.container .item {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
</div>

<button id="add_el">Add element</button>

<template id="item_template">
  <div class="item" style="background: {{color}}">
    <p>{{ num }}</p>
    <p>
      <button class="del_el">Delete</button>
    </p>
  </div>
</template>

PD: O puedes usar grid-auto-rows en mi ejemplo particular.