CSS Dynamic Responsive Column Layout

CSS dynamic responsive column layout

Although you are using items and not text- the below will still work, simply wrap the items into a container with the below CSS applied (replace div with the id or class of this container).

Have a look at the below- the columns will automatically compress at a smaller screen size without the need to media queries.

Demo Fiddle

CSS:

html, body {
    width:100%;
}
div {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 2;
}

Alternatively- with Media Queries

If you want more control- you can simply use a media query to apply columns at sizes above that specified (below being 1024)

html, body {
    width:100%;
}
@media screen and (min-width: 1024px){
    div {
        -webkit-column-width: 20em;
        -webkit-column-gap: 2em;
        -webkit-column-rule: 1px solid #eee;
        -webkit-column-count: 2;
        -moz-column-width: 20em;
        -moz-column-gap: 2em;
        -moz-column-rule: 1px solid #eee;
        -moz-column-count: 2;
        -ms-column-width: 20em;
        -ms-column-gap: 2em;
        -ms-column-rule: 1px solid #eee;
        -ms-column-count: 2;
        column-width: 20em;
        column-gap: 2em;
        column-rule: 1px solid #eee;
        column-count: 2;
    }
}

Preventing elements from breaking between columns

To avoid elements from being broken between columns, you can use the below:

.group{ /* class to restrict breaking on */
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden; /* optional */
    display:inline-block; /* optional */
}

That said, note that functionality support between browsers may be patchy, if it isnt working as expected, replace display:inline-block; with display:table; or remove entirely.

How to create responsive, equal width, dynamic columns?

You need to add a media-query to your css that changes the width of your grid-columns to 100%. Like this:

<style>
.offers-wrap {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 350px));
  justify-content: center;
}

.offer {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 1129px) {
  .offers-wrap {
    grid-template-columns: repeat(auto-fit, minmax(auto, 100%));
  }
}

</style>

<div class="offers-wrap">
   <div class="offer justify-evenly">
     test
   </div>
   <div class="offer justify-evenly">
     test
   </div>
   <div class="offer justify-evenly">
     test
   </div>
</div>

Dynamic CSS grid: 3 cols in a row and 1 full width col on random positions

I think you can do this easily with css grid. They key would be to use grid-auto-flow: dense and then just add grid-column: 1 / -1 to the grid cell that you want to feature.

I have created a small demonstration here (click "Run code snippet" to see it work):

const button = document.querySelector('#btn');
const target = document.querySelector('#target');

button.addEventListener('click', () => {
    target.classList.toggle('featured');    
})

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: .5rem;
  margin-bottom: 1rem;
  grid-auto-flow: dense;
}

.cell {
  height: 50px;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell.featured {
  background-color: pink;
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div id="target" class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
</div>

<button id="btn">Toggle featured</button>

Dynamic CSS grid with template-columns: auto and full-width row

Your header rule sets row to 1, and this limits your grid layout. You need at least 3 rows in order to have one for the header, and two for the full-width element.

Start by removing the header rule completely.
Then add grid-template-rows to the wrapper.
Change your wrapper to use repeat(), this makes the horizontal span work as expected:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
}

In order to make full-width span 2 rows you need at least 3 rows in total. Plus you need to declare your grid-row span like this:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.full-width {
  grid-column: 1 / -1;
  grid-row: span 2 / span 2;
}

If you want an empty node at the top left corner of the grid, we need to increase the amount of columns to 5. We also need an extra class that pushes the first grid child one column towards the right (the other children will be pushed along):

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.wrapper:first-child {
  grid-column-start: 2;
}

CSS dynamic two column layout

You can CSS columns, which has been designed specifically for layout intentions like this.

CSS columns: http://jsfiddle.net/teddyrised/6bz4a0ox/

Use the following markup:

<div class="container">
    <div class="wrapper">
        <label for="">label</label>
        <input type="text" placeholder="[1]">
    </div>
    <!-- more -->
</div>

And for the CSS, we make sure that we declare both the column count (which is 2, as you have wanted) with a minimum column width. I actually would recommend doing this instead of targetting mobile vs desktop, as fluid/responsive layouts should be catered to the content, not the device:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container {
     -webkit-columns: 2 200px;
        -moz-columns: 2 200px;
             columns: 2 200px;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.wrapper {
  overflow: hidden;
  padding: .5em;
}
.wrapper label {
  float: left;
  width: 50px;
}
.wrapper label + input {
  float: left;
  width: calc(100% - 50px);
}

Dynamic column count grid for responsive web design

Are you familiar with Bootstrap grid system?
https://getbootstrap.com/examples/grid/

Get a link for Bootstrap CDN from here (https://www.bootstrapcdn.com/) and link to your html and try this:

.html

<div class="container">
 <div class="col-md-3 col-sm-4 square">1</div>
 <div class="col-md-3 col-sm-4 square">2</div>
 <div class="col-md-3 col-sm-4 square">3</div>
 <div class="col-md-3 col-sm-4 square">4</div>
 <div class="col-md-3 col-sm-4 square">5</div>
 <div class="col-md-3 col-sm-4 square">6</div>
 <div class="col-md-3 col-sm-4 square">7</div>
 <div class="col-md-3 col-sm-4 square">8</div>
</div>

.css

.square {
  border:solid;
  border-color: WHATEVERCOLOR;
  width: 200px;
  height: 200px;
}

If you are curious to know what class fix of ".col-md" or "col-sm" are, check "Grid Options" paragraph on this page:
http://v4-alpha.getbootstrap.com/layout/grid/

How to make grid rows and columns dynamic?

If the order of elements isn't important you can do like below:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  direction: rtl;
}
.parent * {
 direction: ltr;

}
.small-box {
  background: red;
  height: 100px;
  grid-column: span 2;
}
.small-box--new {
  background:lightblue;
} 

.big-box {
  background: blue;
  grid-column:3/span 3;
  grid-row:2;
}
.big-box ~ .big-box {grid-row:3;}
.big-box ~ .big-box ~ .big-box {grid-row:4;}
.big-box ~ .big-box ~ .big-box ~ .big-box {grid-row:5;}
/* and so on */

<div class="parent">
  <div class=" small-box">1</div>
  <div class=" small-box">2</div>
  <div class=" small-box">3</div>
  <div class=" small-box">4</div>
  <div class=" small-box">5</div>
  <div class=" big-box">7</div>
  <div class=" big-box">8</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
</div>

CSS Dynamic Responsive Column Layout