CSS Grid column widths behaving differently in Firefox and Chrome - css

I am new to CSS Grid, while I was implementing a Grid Layout, I realised that the layout is different in Firefox and Chrome. I think Firefox is sticking to the grid width specifications that I give with "grid-template-columns", while chrome is adjusting itself to the content first and then looking at the grid width.
Please find the link below for a pen, when you open it in firefox and chrome the results look different.
How to sort this issue?
https://codepen.io/alosies/pen/OoXvre?editors=1100
.gridWrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
grid-gap: 1rem;
}
.palette {
grid-area: palette;
}
.questionDisplay {
grid-area: questionDisplay;
}
.box{
border: 1px solid grey;
}
<div class="gridWrapper">
<div class="box palette">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
</div>
<div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>
</div>


If you are using grid-template-areas to set your column order, then there's no reason to use repeat or auto-fit. Those functions are for managing a repeating pattern of tracks. That's not what you have. You've created four columns with grid-template-areas.
I think what's happening is that you're sending mixed messages to the browsers, and they are handling it differently. Firefox and Edge process the conflict one way. Chrome does something else.
Try this instead:
.gridWrapper {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
grid-template-columns: minmax(150px, 1fr); /* new */
grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
grid-gap: 1rem;
}
.palette {
grid-area: palette;
}
.questionDisplay {
grid-area: questionDisplay;
}
.box {
border: 1px solid grey;
}
<div class="gridWrapper">
<div class="box palette">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
</div>
<div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>
</div>

Related

I can't position the img next to the p

<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
<img src="images/food.jpg" alt="bowl">
</div>
</section>
section.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
}
The page shows that the columns are divided into two but the image isn't placed on the second column but instead, below the paragraph.
I tried putting a
float: right;
under .authentic img but it didn't do anything.
I also tried altering the rows in hopes of only getting one row of block but nothing happened.

The authentic section only has one child so the grid-template-columns: repeat(2, 50%) not working here. It will need two child to divide them into two columns.
You need to move the image outside of right-col so that it works as different columns.
section.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
}
<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_0hG64Numx1G5C_2yl63NChKDzfO-o6Fo3g&usqp=CAU" alt="bowl">
</section>

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>

Css grid area not binding areas as intended

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>

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