How to Set Up a Dynamic Grid Based on Flex or Grid

How to set up a dynamic grid based on flex or grid

You can do it with flexbox like below:

.container {  border: 1px solid;  display: inline-flex;  flex-wrap: wrap; /* enable the wrap */  margin:5px;  vertical-align: top;  width: 150px;  height: 150px;}
.container>* {  flex-basis: 50%; /* width = 50% */  flex-grow: 1; /* grow if alone in the last row */  border: 1px solid red;  box-sizing: border-box;}

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

CSS Grid Dynamically assign grid column or grid-template-columns

Is there a way I can say for item .col-sm-25 to take up the next 4 available column in the grid row?

Yes.

Just define the grid-column-end as span 4

Grid-column-end @ MDN

span n

Contributes a grid span to the grid item’s placement such that the column end edge of the grid item’s grid area is n lines from the start edge.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.box {
  border: 1px solid green;
  height: 50px;
}

.span-2 {
  grid-column-end: span 2;
  background: green;
}

.span-3 {
  grid-column-end: span 3;
  background: lightblue;
}

.span-4 {
  grid-column-end: span 4;
  background: lightgreen;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-2"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box span-3"></div>
  <div class="box"></div>
  <div class="box span-4"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS grid - dynamic column at the start of the grid

Yes, you can.

The grid layout allows you to set multiple elements in the very same defined cell.

You could set .select and .title inside the first column and first-row. (similar effect to absolute positionning somehow)

If the .select _{^{(is here)}} stands ahead the .title, give the .title a margin or a padding to leave space for the checkbox.

---

Live example below with and without the .select box

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}
.container .select,
.container .title {
  grid-column:1;
  grid-row:1;
}
.select {position:relative;/* bring it up front to be clickable */}
.container .select + .title {
  padding-inline-start:1.5rem;/* or padding-left for ltr direction */
}

<div class="container">
  <div class="select">
    <label>
      <input type="checkbox">
    </label>
  </div>
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>
<hr>
<div class="container">
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>

Can I make a CSS grid with dynamic number of rows or columns?

Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property.

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>

---

Related Topics