Css grid area not binding areas as intended - css

So, I'm facing an issue where my grid areas are not bound like I want them to be.
I'm trying to get one block per line, on different columns, but they appear to all stack on the first line.
This is how they are bound. They ain't in their areas and I'm wondering why.
screenshot
.aboutpage {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: grid;
grid-template-areas:
'a . .'
'. . b'
'c . .'
;
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
gap: 2rem;
background: #000;
}
.info {
grid-area: 'a';
background: palegreen;
}
.textA {
grid-area: 'b';
background: palevioletred;
}
.textB {
grid-area: 'c';
background: palegoldenrod;
}
.main_title {
font-family: 'Abril Fatface', cursive;
letter-spacing: .15rem;
font-size: clamp(2rem, 3vw, 8rem);
text-align: center;
margin-bottom: 5rem;
}
<section class='aboutpage'>
<h1 class='main-title'>About me</h1>
<div class='content'>
<div class='info'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, cupiditate dignissimos! Fugit officia voluptate facere aut alias quaerat!
</div>
<p class='textA'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt inventore, ipsum optio nostrum nulla, quibusdam temporibus, beatae distinctio eaque doloribus nobis repellendus sapiente eos ea.</p>
<p class='textB'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, autem? Quibusdam expedita totam fugit perferendis officiis, eius soluta.</p>
</div>
</section>
Thanks to anyone who can help me with this!


Use your browser's dev tool inspect facility on one of the misplaced items.
You will see that it has a warning that the value is illegal.
That is because you have put quotes around the value ('a', 'b' and 'c').
Remove those and all is well.
.aboutpage {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: grid;
grid-template-areas: 'a . .' '. . b' 'c . .';
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
gap: 2rem;
background: #000;
}
.info {
grid-area: a;
background: palegreen;
}
.textA {
grid-area: b;
background: palevioletred;
}
.textB {
grid-area: c;
background: palegoldenrod;
}
.main_title {
font-family: 'Abril Fatface', cursive;
letter-spacing: .15rem;
font-size: clamp(2rem, 3vw, 8rem);
text-align: center;
margin-bottom: 5rem;
}
<section class='aboutpage'>
<h1 class='main-title'>About me</h1>
<div class='content'>
<div class='info'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, cupiditate dignissimos! Fugit officia voluptate facere aut alias quaerat!
</div>
<p class='textA'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt inventore, ipsum optio nostrum nulla, quibusdam temporibus, beatae distinctio eaque doloribus nobis repellendus sapiente eos ea.</p>
<p class='textB'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, autem? Quibusdam expedita totam fugit perferendis officiis, eius soluta.</p>
</div>
</section>

Related

How to resize grid cells to fit their contents? I have spent couple days now trying to figure this out now

I'm trying to resize my grid cells to fit their contents but when i gave them heigh induvidually it distored the whol layout. I have a grid container that has two container inside. the first one is a grid container and the second one is a flex box
take a look at my css maybe I got the layout wrong `.
mycontainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
}
.mycontainer > div {
background-color: gray;
border: 1px red solid;
}
.boxe1 {
grid-column: 1 / span 2;
}
.seconContainer > div {
background-color: gray;
border: 1px red solid;
}
.boxe1 {
height: 435px;
}
.boxe5 {
height: 535px;
}
.seconContainer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
}
.bigcontainer {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 25px;
}
#media only screen and (max-width: 800px) {
.bigcontainer {
background-color: blue;
display: flex;
flex-direction: column;
}
}
here is my HTML
<div class="bigcontainer">
<div class="mycontainer">
<div class="boxe1">
<p><br/></p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p>
</div>
<div class="boxe2">
<img src="textimages/box3.jpg" alt="" class="img-fluid"/>
</div>
<div class="boxe3">
<img src="textimages/box3.jpg" alt="" class="img-fluid"/>
</div>
</div>
<div class="seconContainer">
<div class="boxe4">
<img src="textimages/box4.jpg" alt="" class="img-fluid" />
</div>
<div class="boxe5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p>
</div>
</div>
`
this is what I'm trying to achieve

This might help you and i used sample images
I used flex box for responsive instead of grid.
* {
box-sizing: border-box;
}
body{
overflow:hidden;
overflow-y:scroll;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
height: 100vh;
font-family: 'sans';
}
.bigcontainer::after {
content: '';
background: #f6f2ea;
width: 60%;
height: inherit;
position: absolute;
z-index: -1;
right: 0;
}
.bigcontainer > div {
width: 50%;
height: 50%;
padding: 15px;
}
.box2 img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.box3 {
display: flex;
gap: 10px;
}
.box3 img {
width: 50%;
border-radius: 5px;
}
#media screen and (max-width: 768px) {
.bigcontainer > div {
width:100%;
height: max-content;
flex: 0 0 100%;
}
.box2 {
order: 4
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
<div class="bigcontainer">
<div class="box1">
<h2>Title</h2>
<p>Lorem apsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
</div>
<div class="box2">
<img src="https://static.asianpaints.com/content/dam/sleek/kitchen-landing/TheRomantic%20Inspiration.jpg" alt="" class="img-fluid" />
</div>
<div class="box3">
<img src="https://cdn.onekindesign.com/wp-content/uploads/2013/09/Small-Kitchen-Ideas-01-1-Kindesign.jpg" alt="" class="img-fluid"/>
<img src="https://cdn.onekindesign.com/wp-content/uploads/2013/09/Small-Kitchen-Ideas-01-1-Kindesign.jpg" alt="" class="img-fluid"/>
</div>
<div class="box4">
<h2>Title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
</div>

Uneven items in flex columns [duplicate]

This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
On large screens, I'd like to have a column on the left, and another column on the right that has 2 stacked boxes.
On small screens, these columns should stack into a single column. However, the order of the boxes should be 2,1,3.
Here is an illustration:
I've set the flex container with flex-direction: column and flex-wrap: wrap, and box 1 to flex-basis: 100%, but that doesn't make the second two items wrap to the next column.
How can this layout be achieved in flexbox?
Here is a demo of where I'm at so far:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
http://codepen.io/dloewen/pen/qOzogG

It looks like you were almost there. Just two more steps:
Define a height for the flex container
Without a defined height some browsers may not know where to wrap. Try this:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px; /* new; value just for demo purposes */
}
Turn off wrap on mobile view
#media (max-width: 500px) {
.container { flex-wrap: nowrap; } /* new */
.cell { width: 100%; }
.cell-1 { order: 2; }
.cell-2 { order: 1; }
.cell-3 { order: 3; }
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.container {
flex-wrap: nowrap;
}
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
revised codepen

First we create a container .Box and set width and height. Honestly, it is just for demo i set 80vw and 80vh. And that container should be a flex element with column orientation flex-flow: column wrap;. And we set the max-width of the largest blocks (.BoxItem--large { max-width: 80%; height: 100%; }) 100% of parents height. It is for wrapping the other elements on the new line/column. So elements from another column should fill all space, so we set .BoxItem--small { max-width: 20%; height: auto; } - yes, 80% + 20% == 100%, that the math. lets change behaviour on the low-width screens. #media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } we dont need to wrap elements, so just change that. After that we want every BoxItem element to inherit parents width. .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; for cascading, we dont want care about some old rules like .BoxItem--large { max-width: 80%; } and .BoxItem--small { max-width: 20%; }. And set some order changes.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
}
.Box {
width: 80vw;
height: 80vh;
background-color: rgba(0,0,0,.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.BoxItem {
background-color: #fff;
border: 1px solid #000;
}
.BoxItem--large {
max-width: 80%;
height: 100%;
}
.BoxItem--small {
max-width: 20%;
height: auto;
}
#media screen and (max-width: 600px) {
.Box {
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.BoxItem {
width: 100%;
max-width: 100%;
}
.BoxItem--large {
height: auto;
}
.BoxItem--1 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.BoxItem--2 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.BoxItem--3 {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
}
<div class="Box">
<div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
<div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
<div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>

Flex layout wrap and stacking [duplicate]

This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
On large screens, I'd like to have a column on the left, and another column on the right that has 2 stacked boxes.
On small screens, these columns should stack into a single column. However, the order of the boxes should be 2,1,3.
Here is an illustration:
I've set the flex container with flex-direction: column and flex-wrap: wrap, and box 1 to flex-basis: 100%, but that doesn't make the second two items wrap to the next column.
How can this layout be achieved in flexbox?
Here is a demo of where I'm at so far:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
http://codepen.io/dloewen/pen/qOzogG

It looks like you were almost there. Just two more steps:
Define a height for the flex container
Without a defined height some browsers may not know where to wrap. Try this:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px; /* new; value just for demo purposes */
}
Turn off wrap on mobile view
#media (max-width: 500px) {
.container { flex-wrap: nowrap; } /* new */
.cell { width: 100%; }
.cell-1 { order: 2; }
.cell-2 { order: 1; }
.cell-3 { order: 3; }
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.container {
flex-wrap: nowrap;
}
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
revised codepen

First we create a container .Box and set width and height. Honestly, it is just for demo i set 80vw and 80vh. And that container should be a flex element with column orientation flex-flow: column wrap;. And we set the max-width of the largest blocks (.BoxItem--large { max-width: 80%; height: 100%; }) 100% of parents height. It is for wrapping the other elements on the new line/column. So elements from another column should fill all space, so we set .BoxItem--small { max-width: 20%; height: auto; } - yes, 80% + 20% == 100%, that the math. lets change behaviour on the low-width screens. #media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } we dont need to wrap elements, so just change that. After that we want every BoxItem element to inherit parents width. .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; for cascading, we dont want care about some old rules like .BoxItem--large { max-width: 80%; } and .BoxItem--small { max-width: 20%; }. And set some order changes.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
}
.Box {
width: 80vw;
height: 80vh;
background-color: rgba(0,0,0,.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.BoxItem {
background-color: #fff;
border: 1px solid #000;
}
.BoxItem--large {
max-width: 80%;
height: 100%;
}
.BoxItem--small {
max-width: 20%;
height: auto;
}
#media screen and (max-width: 600px) {
.Box {
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.BoxItem {
width: 100%;
max-width: 100%;
}
.BoxItem--large {
height: auto;
}
.BoxItem--1 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.BoxItem--2 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.BoxItem--3 {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
}
<div class="Box">
<div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
<div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
<div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>

With CSS `grid-template-rows: subgrid`, and items spanning rows, how do I get a new 'multi-row' row?

I'm using Firefox – as yet the only browser to support the subgrid – and actually trying to use that subgrid feature:
const D = document,
gen = function*() {
let start = 125;
while (true) {
yield ++start;
}
},
imgNum = gen(),
create = (tag) => document.createElement(tag),
addCard = (evt) => {
let article = create('article'),
main = evt.currentTarget.closest('main'),
articleCount = main.querySelectorAll('article').length,
h2 = create('h2'),
img = create('img'),
p = create('p');
h2.textContent = `Title ${articleCount + 1}`;
img.src = `https://picsum.photos/id/${imgNum.next().value}/200/`;
p.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!";
article.append(h2, img, p);
main.querySelector('section').append(article);
}
document.querySelector('button').addEventListener('click', addCard);
*, ::before, ::after {
box-sizing: border-box;
font-family: Montserrat, Roboto, system-ui;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
}
main {
display: grid;
margin-block: 1em;
margin-inline: auto;
width: clamp(20em, 70vw, 1000px);
}
section {
display: grid;
gap: 0.5em;
grid-auto-columns: 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2em min-content fit-content;
grid-template-areas: 'header' 'image' 'description';
padding: 0.5em;
}
article {
border: 1px solid currentColor;
display: grid;
grid-template-rows: subgrid;
grid-row: auto / span 3;
padding: 0.5em;
}
article h2 {
background-color: rgb(210 210 210 / 0.8);
grid-area: header;
font-weight: 600;
text-align: center;
}
article img {
grid-area: image;
object-fit: cover;
width: 100%;
filter: grayscale(95%);
opacity: 0.4;
transition: filter 0.4s ease-in;
}
article p {
grid-area: description;
}
<main>
<button>Add new card</button>
<section>
<article>
<h2>Title 1</h2>
<img src="https://picsum.photos/id/123/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 2</h2>
<img src="https://picsum.photos/id/124/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 3</h2>
<img src="https://picsum.photos/id/125/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
</section>
</main>
JS Fiddle demo.
With this, I click the <button> element and a new <article> element is created, giving the following HTML (for the first created <article>):
<article>
<h2>Title 4</h2>
<img src="https://picsum.photos/id/125/200/">
<p>Lorem ipsum dolor sit amet <!-- removed for brevity --></p>
</article>
and that <article> is correctly appended to the <section>. So far, so good.
But, these articles are styled with:
article {
display: grid;
grid-template-rows: subgrid;
grid-row: auto / span 3;
}
And that use of grid-row: auto / span 3 is required to have the <article> span the three rows required to enable the consistent element-sizing of adjacent <article> element's descendants on the same row.
Using the <button> to add another <article>, however, causes some form of visual chaos, in which the <h2> is located behind the <img> element, and the <img> vertically – on the page – lower down than the <p>:
(This is accurately reproduced in the above Snippet, though obviously does require Firefox, version 71 or later.)
As for my expectations: I would like the elements placed on the implicit rows to accurately reflect the layout of the first row, with the explicit rows.
My first attempt to implement this lay in adding:
section {
/* ... */
grid-auto-rows: repeat(1, 2em min-content fit-content);
}
This, obviously, did not work.
const D = document,
gen = function*() {
let start = 125;
while (true) {
yield start++;
}
},
imgNum = gen(),
create = (tag) => document.createElement(tag),
addCard = (evt) => {
let article = create('article'),
main = evt.currentTarget.closest('main'),
articleCount = main.querySelectorAll('article').length,
h2 = create('h2'),
img = create('img'),
p = create('p');
h2.textContent = `Title ${articleCount + 1}`;
img.src = `https://picsum.photos/id/${imgNum.next().value}/200/`;
p.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!";
article.append(h2, img, p);
main.querySelector('section').append(article);
}
document.querySelector('button').addEventListener('click', addCard);
*,
::before,
::after {
box-sizing: border-box;
font-family: Montserrat, Roboto, system-ui;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
}
main {
display: grid;
margin-block: 1em;
margin-inline: auto;
width: clamp(20em, 70vw, 1000px);
}
section {
display: grid;
gap: 0.5em;
grid-auto-columns: 1fr;
grid-auto-rows: repeat(1, 2em min-content fit-content);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2em min-content fit-content;
grid-template-areas: 'header' 'image' 'description';
padding: 0.5em;
}
article {
border: 1px solid currentColor;
display: grid;
grid-template-rows: subgrid;
grid-row: auto / span 3;
padding: 0.5em;
}
article h2 {
background-color: rgb(210 210 210 / 0.8);
grid-area: header;
font-weight: 600;
text-align: center;
}
article img {
grid-area: image;
object-fit: cover;
width: 100%;
filter: grayscale(95%);
opacity: 0.4;
transition: filter 0.4s ease-in;
}
article p {
grid-area: description;
}
<main>
<button>Add new card</button>
<section>
<article>
<h2>Title 1</h2>
<img src="https://picsum.photos/id/123/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 2</h2>
<img src="https://picsum.photos/id/124/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 3</h2>
<img src="https://picsum.photos/id/125/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
</section>
</main>
JS Fiddle demo.
I'm clearly missing something – but I trust that this use-case has been anticipated – and would very much appreciate help.

The issue is that you have defined one template which means only one row will follow that template and all the others will have an implicit one. What you need is a repeated template and for this you need to get rid of named areas.
Basically, you don't need to do anything because the browser will do the job for you. Making the article span 3 rows is already enough. Note that your grid-template-rows (2em min-content fit-content) is invalid
const D = document,
gen = function* (){
let start = 125;
while (true){
yield start++;
}
},
imgNum = gen(),
create = (tag) => document.createElement(tag),
addCard = (evt) => {
let article = create('article'),
main = evt.currentTarget.closest('main'),
articleCount = main.querySelectorAll('article').length,
h2 = create('h2'),
img = create('img'),
p = create('p');
h2.textContent = `Title ${articleCount + 1}`;
img.src = `https://picsum.photos/id/${imgNum.next().value}/200/`;
p.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!";
article.append(h2, img, p);
main.querySelector('section').append(article);
}
document.querySelector('button').addEventListener('click', addCard);
*, ::before, ::after {
box-sizing: border-box;
font-family: Montserrat, Roboto, system-ui;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
}
main {
display: grid;
margin-block: 1em;
margin-inline: auto;
width: clamp(20em, 70vw, 1000px);
}
section {
display: grid;
gap: 0.5em;
grid-template-columns: repeat(3, 1fr);
padding: 0.5em;
}
article {
border: 1px solid currentColor;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
padding: 0.5em;
}
article h2 {
background-color: rgb(210 210 210 / 0.8);
font-weight: 600;
text-align: center;
height: 2em;
}
article img {
object-fit: cover;
width: 100%;
height: 100%;
filter: grayscale(95%);
opacity: 0.4;
transition: filter 0.4s ease-in;
}
article p {}
<main>
<button>Add new card</button>
<section>
<article>
<h2>Title 1</h2>
<img src="https://picsum.photos/id/123/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 2</h2>
<img src="https://picsum.photos/id/124/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 3</h2>
<img src="https://picsum.photos/id/125/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
</section>
</main>
In case you need to define the size of the rows you have to use grid-auto-rows: 1st 2nd 3rd; instead of grid-template-rows: 1st 2nd 3rd;
const D = document,
gen = function* (){
let start = 125;
while (true){
yield start++;
}
},
imgNum = gen(),
create = (tag) => document.createElement(tag),
addCard = (evt) => {
let article = create('article'),
main = evt.currentTarget.closest('main'),
articleCount = main.querySelectorAll('article').length,
h2 = create('h2'),
img = create('img'),
p = create('p');
h2.textContent = `Title ${articleCount + 1}`;
img.src = `https://picsum.photos/id/${imgNum.next().value}/200/`;
p.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!";
article.append(h2, img, p);
main.querySelector('section').append(article);
}
document.querySelector('button').addEventListener('click', addCard);
*, ::before, ::after {
box-sizing: border-box;
font-family: Montserrat, Roboto, system-ui;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
}
main {
display: grid;
margin-block: 1em;
margin-inline: auto;
width: clamp(20em, 70vw, 1000px);
}
section {
display: grid;
gap: 0.5em;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 2em 100px auto;
padding: 0.5em;
}
article {
border: 1px solid currentColor;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
padding: 0.5em;
}
article h2 {
background-color: rgb(210 210 210 / 0.8);
font-weight: 600;
text-align: center;
}
article img {
object-fit: cover;
width: 100%;
height: 100%;
filter: grayscale(95%);
opacity: 0.4;
transition: filter 0.4s ease-in;
}
article p {}
<main>
<button>Add new card</button>
<section>
<article>
<h2>Title 1</h2>
<img src="https://picsum.photos/id/123/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 2</h2>
<img src="https://picsum.photos/id/124/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 3</h2>
<img src="https://picsum.photos/id/125/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
</section>
</main>
It should be noted that the result will also look good on browser that doesn't support subgrid since by default all the elements will get placed correctly inside article. You will only miss the gap and the alignment.
The gap can be added to article if you want:
const D = document,
gen = function* (){
let start = 125;
while (true){
yield start++;
}
},
imgNum = gen(),
create = (tag) => document.createElement(tag),
addCard = (evt) => {
let article = create('article'),
main = evt.currentTarget.closest('main'),
articleCount = main.querySelectorAll('article').length,
h2 = create('h2'),
img = create('img'),
p = create('p');
h2.textContent = `Title ${articleCount + 1}`;
img.src = `https://picsum.photos/id/${imgNum.next().value}/200/`;
p.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!";
article.append(h2, img, p);
main.querySelector('section').append(article);
}
document.querySelector('button').addEventListener('click', addCard);
*, ::before, ::after {
box-sizing: border-box;
font-family: Montserrat, Roboto, system-ui;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
}
main {
display: grid;
margin-block: 1em;
margin-inline: auto;
width: clamp(20em, 70vw, 1000px);
}
section {
display: grid;
gap: 0.5em;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 2em 100px auto;
padding: 0.5em;
}
article {
border: 1px solid currentColor;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
padding: 0.5em;
gap: inherit;
}
article h2 {
background-color: rgb(210 210 210 / 0.8);
font-weight: 600;
text-align: center;
}
article img {
object-fit: cover;
width: 100%;
height: 100%;
filter: grayscale(95%);
opacity: 0.4;
transition: filter 0.4s ease-in;
}
article p {}
<main>
<button>Add new card</button>
<section>
<article>
<h2>Title 1</h2>
<img src="https://picsum.photos/id/123/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 2</h2>
<img src="https://picsum.photos/id/124/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
<article>
<h2>Title 3</h2>
<img src="https://picsum.photos/id/125/200/" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis maxime corporis eius qui eligendi, autem tenetur consectetur, eum officiis impedit dolorum ipsum ullam illum at alias hic facilis! Impedit, sint!</p>
</article>
</section>
</main>

Arrange 3 divs depending on the responsive design [duplicate]

This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
On large screens, I'd like to have a column on the left, and another column on the right that has 2 stacked boxes.
On small screens, these columns should stack into a single column. However, the order of the boxes should be 2,1,3.
Here is an illustration:
I've set the flex container with flex-direction: column and flex-wrap: wrap, and box 1 to flex-basis: 100%, but that doesn't make the second two items wrap to the next column.
How can this layout be achieved in flexbox?
Here is a demo of where I'm at so far:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
http://codepen.io/dloewen/pen/qOzogG

It looks like you were almost there. Just two more steps:
Define a height for the flex container
Without a defined height some browsers may not know where to wrap. Try this:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px; /* new; value just for demo purposes */
}
Turn off wrap on mobile view
#media (max-width: 500px) {
.container { flex-wrap: nowrap; } /* new */
.cell { width: 100%; }
.cell-1 { order: 2; }
.cell-2 { order: 1; }
.cell-3 { order: 3; }
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
.cell {
background: #ccc;
border: solid 3px black;
width: 50%;
}
.cell-1 {
flex-basis: 100%;
}
#media (max-width: 500px) {
.container {
flex-wrap: nowrap;
}
.cell {
width: 100%;
}
.cell-1 {
order: 2;
}
.cell-2 {
order: 1;
}
.cell-3 {
order: 3;
}
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
<div class="cell cell-1">
<h2>One</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
</div>
<div class="cell cell-2">
<h2>Two</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
</div>
<div class="cell cell-3">
<h2>Three</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
</div>
</div>
revised codepen

First we create a container .Box and set width and height. Honestly, it is just for demo i set 80vw and 80vh. And that container should be a flex element with column orientation flex-flow: column wrap;. And we set the max-width of the largest blocks (.BoxItem--large { max-width: 80%; height: 100%; }) 100% of parents height. It is for wrapping the other elements on the new line/column. So elements from another column should fill all space, so we set .BoxItem--small { max-width: 20%; height: auto; } - yes, 80% + 20% == 100%, that the math. lets change behaviour on the low-width screens. #media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } we dont need to wrap elements, so just change that. After that we want every BoxItem element to inherit parents width. .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; for cascading, we dont want care about some old rules like .BoxItem--large { max-width: 80%; } and .BoxItem--small { max-width: 20%; }. And set some order changes.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
}
.Box {
width: 80vw;
height: 80vh;
background-color: rgba(0,0,0,.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.BoxItem {
background-color: #fff;
border: 1px solid #000;
}
.BoxItem--large {
max-width: 80%;
height: 100%;
}
.BoxItem--small {
max-width: 20%;
height: auto;
}
#media screen and (max-width: 600px) {
.Box {
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.BoxItem {
width: 100%;
max-width: 100%;
}
.BoxItem--large {
height: auto;
}
.BoxItem--1 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.BoxItem--2 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.BoxItem--3 {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
}
<div class="Box">
<div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
<div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
<div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>

Resources