Take 2 columns in 2-columns layout but not when 1-column layout in CSS grid without @media

Question

The desired layout for wide screens:

The desired layout for narrow screens:

Initial CSS:

.La         


        

Answer 1

A posible solution using flex, like MichaelT

.layout {
  border: solid 1px black;
  margin: 2px;
  position: relative;
}


.innerlayout {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: -10px;
  right: 10px;
  width: calc(100% + 20px);
}

span {
    background-color: green;
    height: 40px;
    min-width: 240px;
    width: 40%;
    margin: 15px 10px;
    flex-grow: 1;
}

.wide {
    width: 100%;
    background-color: red;
}

#narrow {
    width: 300px;
}

<div class="layout">
<div class="innerlayout">
  <span></span>
  <span></span>
  <span class="wide"></span>
  <span></span>
  <span></span>
</div>
</div>

<div class="layout" id="narrow">
<div class="innerlayout">
  <span></span>
  <span></span>
  <span class="wide"></span>
  <span></span>
  <span></span>
</div>
</div>

Answer 2

Finally I think I could handle your problem, but by using flex instead of grid. It is pretty tricky.

The main element is a class called wrapper, which has display: flex;. You can insert your "grid items" there, now called wrapper-container.

I need this helper class to recreate the grid-gap property. Now I am using padding instead. Note that padding works a bit ditterent to grid-gap so I had to divide your gap by 2.

Each wrapper-container has a wrapper-container__item child, which contains your content. When you inspect these elements, you will notice, that they have at least a width of 240px which is caused by their min-width property.

When you want an element to span over two "columns" add the class wrapper-container__stretched to the wrapper-container. It is applying width: 100% so that the element will be fullsized. Elements which do not have the class, has flex: 1, so they will stay next to each other (just like a 2-column grid).

Feel free to ask when there are any ambiguities.

Codepen: Responsive grid without media queries using flex-box

.wrapper{
  position: relative;
  width: 100%;
  background: #dedede;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrapper-container{
  position: relative;
  padding: 12px 20px;
}

.wrapper-container:not(.wrapper-container__stretched){
  flex: 1;
}

.wrapper-container.wrapper-container__stretched{
  width: 100% !important;
}

.wrapper-container__item{
  position: relative;
  min-width: 240px;
  min-height: 64px;
  width: 100%;
}


.red{
  background: #e53935;
}

.green{
  background: #388e3c;
}

<section class="wrapper">
  <!-- Row 1 -->
  <div class="wrapper-container">
    <div class="wrapper-container__item green">Item 1</div>
  </div>
  <div class="wrapper-container">
    <div class="wrapper-container__item green">Item 2</div>
  </div>
  <!-- Row 2 -->
  <div class="wrapper-container wrapper-container__stretched">
    <div class="wrapper-container__item red">Item 3</div>
  </div>
  <!-- Row 3 -->
  <div class="wrapper-container">
    <div class="wrapper-container__item green">Item 4</div>
  </div>
  <div class="wrapper-container">
    <div class="wrapper-container__item green">Item 5</div>
  </div>
</section>

Answer 3

Use grid-column: 1/-1;

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

That you can edit like below if you want to always have a maximum of 2 columns:

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(240px,40vw), 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>