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;
}