.columns{
display:flex;
height:100px;
}
.columns >* {
flex-basis: 100%;
}
.s-columns {
display: flex;
flex-wrap: wrap;
}
.s-column-content {
flex: 1 1 30ch; /* Stretching: */
margin: 5px;
height:100px; }
Columns stack as window width shrinks using a fixed flex-basis.
.g-columns {
width: min(90%, 75rem);
display: grid;
grid-auto-flow: row;
gap: 2em; }
This is by Kevin Powell (https://codepen.io/kevinpowell/pen/RwpKgNb). It is almost functionally equivalent to the Stacking Columns above but made using grid and a @media query instead of flexbox. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ullam at optio totam ab est ratione, sed, illo doloremque dignissimos vero voluptatum.
Itaque, ab dolor? Quis architecto non obcaecati earum optio ipsum, magni voluptate repudiandae neque consequatur, quibusdam doloremque in libero maiores.
Nisi velit laborum, sequi sit perferendis, ea exercitationem ipsa officiis inventore tenetur assumenda! Consequuntur accusantium quibusdam molestias nam, veritatis labore!
.grid{
display:flex;
flex-wrap: wrap;
}
.grid >*{
flex: 1 1 30ch;
height:100px; }
.sidebar {
display: flex;
flex-wrap: wrap;
}
.sidebar > *:nth-child(1) {
flex: 1 1 68%;
min-width: 50ch;
}
.sidebar > *:nth-child(2) {
flex: 1 1 28%;
min-width: 25ch; }