Flexbox one long and short columns
Multi tool use
I'm trying to implement a layout like this:
On a narrower screen it look like this:
here is my code so far:
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
The problem is that I need to set height
to the .cont
in order for columns to wrap in a widescreen mode, and I can't do that due to the variable content size. For example if I had only 2 small paragraphs in cell-1
and a height
of 500px
that would lead to footer being too far below from .cont
. Or if I had to many content in cell-1
and a height: 500px
, it would lead to content inside .cont
go under footer.
What would you suggest to solve this problem?
codepen
html css css3 flexbox
add a comment |
I'm trying to implement a layout like this:
On a narrower screen it look like this:
here is my code so far:
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
The problem is that I need to set height
to the .cont
in order for columns to wrap in a widescreen mode, and I can't do that due to the variable content size. For example if I had only 2 small paragraphs in cell-1
and a height
of 500px
that would lead to footer being too far below from .cont
. Or if I had to many content in cell-1
and a height: 500px
, it would lead to content inside .cont
go under footer.
What would you suggest to solve this problem?
codepen
html css css3 flexbox
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:cell-2
-cell-1
-cell-3
. Or will I?
– bloodwithmilk
Nov 13 '18 at 21:56
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58
add a comment |
I'm trying to implement a layout like this:
On a narrower screen it look like this:
here is my code so far:
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
The problem is that I need to set height
to the .cont
in order for columns to wrap in a widescreen mode, and I can't do that due to the variable content size. For example if I had only 2 small paragraphs in cell-1
and a height
of 500px
that would lead to footer being too far below from .cont
. Or if I had to many content in cell-1
and a height: 500px
, it would lead to content inside .cont
go under footer.
What would you suggest to solve this problem?
codepen
html css css3 flexbox
I'm trying to implement a layout like this:
On a narrower screen it look like this:
here is my code so far:
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
The problem is that I need to set height
to the .cont
in order for columns to wrap in a widescreen mode, and I can't do that due to the variable content size. For example if I had only 2 small paragraphs in cell-1
and a height
of 500px
that would lead to footer being too far below from .cont
. Or if I had to many content in cell-1
and a height: 500px
, it would lead to content inside .cont
go under footer.
What would you suggest to solve this problem?
codepen
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
.cont
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
.cell
border: 2px solid black;
.cell-1
flex-basis: 100%;
width: 70%;
margin-right: 25px;
.cell-2,
.cell-3
width: 30%;
@media (max-width: 1000px) {
.cont
flex-wrap: nowrap;
.cell
width: 100%;
.cell-1, .cell-2, cell-3
width: 100%;
.cell-1
order: 2;
.cell-2
order: 1;
.cell-3
order: 3;
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
</div>
<div class="cell cell-2">
<h2>Two</h2>
</div>
<div class="cell cell-3">
<h2>Three</h2>
</div>
</div>
html css css3 flexbox
html css css3 flexbox
edited Nov 13 '18 at 22:24
Temani Afif
74.8k94386
74.8k94386
asked Nov 13 '18 at 21:53
bloodwithmilkbloodwithmilk
2451313
2451313
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:cell-2
-cell-1
-cell-3
. Or will I?
– bloodwithmilk
Nov 13 '18 at 21:56
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58
add a comment |
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:cell-2
-cell-1
-cell-3
. Or will I?
– bloodwithmilk
Nov 13 '18 at 21:56
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:
cell-2
- cell-1
- cell-3
. Or will I?– bloodwithmilk
Nov 13 '18 at 21:56
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:
cell-2
- cell-1
- cell-3
. Or will I?– bloodwithmilk
Nov 13 '18 at 21:56
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58
add a comment |
1 Answer
1
active
oldest
votes
You can "easily" achieve it with grid:
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290068%2fflexbox-one-long-and-short-columns%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can "easily" achieve it with grid:
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
add a comment |
You can "easily" achieve it with grid:
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
add a comment |
You can "easily" achieve it with grid:
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
You can "easily" achieve it with grid:
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
.cont
display: grid;
grid-template: 'content side-1' 'content side-2';
grid-template-columns: 7fr 3fr;
grid-column-gap: 1em;
.cell-1
grid-area: content;
.cell-2
grid-area: side-1;
.cell-3
grid-area: side-2;
@media(max-width: 768px)
.cont
grid-template: 'side-1' 'content' 'side-2'
<div class="cont">
<div class="cell cell-1">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
<p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
</div>
<div class="cell cell-2">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc.
</div>
<div class="cell cell-3">
<h2>Three</h2>
<p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
</div>
</div>
answered Nov 13 '18 at 22:15
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
35.5k74774
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
add a comment |
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
well, let's keep only one .. Already reached the daily cap anyway :p
– Temani Afif
Nov 13 '18 at 22:21
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
@T, thank you, man. Kind regards.
– Andrei Gheorghiu
Nov 13 '18 at 22:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290068%2fflexbox-one-long-and-short-columns%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
fLLRh3m FtHyPPb1gWG,xWQwAz6ySo,0 lEH ZLkAR7p6Xvc
wrap cell-2 and cell-3 together and keep row direction on cont
– Temani Afif
Nov 13 '18 at 21:54
@TemaniAfif I've done this already. I won't be able to order them properly on a narrow screen:
cell-2
-cell-1
-cell-3
. Or will I?– bloodwithmilk
Nov 13 '18 at 21:56
hmm no you won't
– Temani Afif
Nov 13 '18 at 21:58