Align heights of daughter blocks of different blocks CSS (flex/grid)
1
Hi, guys! I have a question. I would like to do the same markup as on the picture(CLICK and LOOK!!!) The problem is: the grey line between the top part and bottom part of the card of the cards on the same level should be aligned. As you see in the picture on the first cards' track grey line is lower because of bigger text on the second picture. And on the second cards' track the grey line is higher because there is no overflowed text. We can use flex and grid.
<div class="cat-cards">
<div class="cat-card">
<img src="">
<div class="short-description">
short
</div>
<div class="long-description">
long
</div>
</div>
<div class="cat-card"></div>
<div class="cat-card"></div>
</div>
I imagined that the base should be like this, but you can write any suggestions that use grid and flex
.cat-cards
{
display: flex;
}
.cat-card
{
display: grid;
grid-template-areas: 'image' 'short'
'long' 'long';
}
.cat-card img
{
grid-area: image;
}
.cat-card .short-description
{
grid-area: short;
}
.cat-card .long-description
{
grid-area: long;
}
html css css3 flexbox css-grid
asked Nov 12 at 12:31
Дарья
155
add a comment |
1
Hi, guys! I have a question. I would like to do the same markup as on the picture(CLICK and LOOK!!!) The problem is: the grey line between the top part and bottom part of the card of the cards on the same level should be aligned. As you see in the picture on the first cards' track grey line is lower because of bigger text on the second picture. And on the second cards' track the grey line is higher because there is no overflowed text. We can use flex and grid.
<div class="cat-cards">
<div class="cat-card">
<img src="">
<div class="short-description">
short
</div>
<div class="long-description">
long
</div>
</div>
<div class="cat-card"></div>
<div class="cat-card"></div>
</div>
I imagined that the base should be like this, but you can write any suggestions that use grid and flex
.cat-cards
{
display: flex;
}
.cat-card
{
display: grid;
grid-template-areas: 'image' 'short'
'long' 'long';
}
.cat-card img
{
grid-area: image;
}
.cat-card .short-description
{
grid-area: short;
}
.cat-card .long-description
{
grid-area: long;
}
html css css3 flexbox css-grid
asked Nov 12 at 12:31
Дарья
155
1
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
Are all the images of the same height ?
– vals
Nov 12 at 15:07
yes, all images have the same size
– Дарья
Nov 12 at 15:31
add a comment |
1
1
1
Hi, guys! I have a question. I would like to do the same markup as on the picture(CLICK and LOOK!!!) The problem is: the grey line between the top part and bottom part of the card of the cards on the same level should be aligned. As you see in the picture on the first cards' track grey line is lower because of bigger text on the second picture. And on the second cards' track the grey line is higher because there is no overflowed text. We can use flex and grid.
<div class="cat-cards">
<div class="cat-card">
<img src="">
<div class="short-description">
short
</div>
<div class="long-description">
long
</div>
</div>
<div class="cat-card"></div>
<div class="cat-card"></div>
</div>
I imagined that the base should be like this, but you can write any suggestions that use grid and flex
.cat-cards
{
display: flex;
}
.cat-card
{
display: grid;
grid-template-areas: 'image' 'short'
'long' 'long';
}
.cat-card img
{
grid-area: image;
}
.cat-card .short-description
{
grid-area: short;
}
.cat-card .long-description
{
grid-area: long;
}
html css css3 flexbox css-grid
asked Nov 12 at 12:31
Дарья
155
Hi, guys! I have a question. I would like to do the same markup as on the picture(CLICK and LOOK!!!) The problem is: the grey line between the top part and bottom part of the card of the cards on the same level should be aligned. As you see in the picture on the first cards' track grey line is lower because of bigger text on the second picture. And on the second cards' track the grey line is higher because there is no overflowed text. We can use flex and grid.
<div class="cat-cards">
<div class="cat-card">
<img src="">
<div class="short-description">
short
</div>
<div class="long-description">
long
</div>
</div>
<div class="cat-card"></div>
<div class="cat-card"></div>
</div>
I imagined that the base should be like this, but you can write any suggestions that use grid and flex
.cat-cards
{
display: flex;
}
.cat-card
{
display: grid;
grid-template-areas: 'image' 'short'
'long' 'long';
}
.cat-card img
{
grid-area: image;
}
.cat-card .short-description
{
grid-area: short;
}
.cat-card .long-description
{
grid-area: long;
}
html css css3 flexbox css-grid
html css css3 flexbox css-grid
asked Nov 12 at 12:31
Дарья
155
asked Nov 12 at 12:31
Дарья
155
edited Nov 12 at 12:48
asked Nov 12 at 12:31
Дарья
155
asked Nov 12 at 12:31
Дарья
155
asked Nov 12 at 12:31
Дарья
155
155
1
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
Are all the images of the same height ?
– vals
Nov 12 at 15:07
yes, all images have the same size
– Дарья
Nov 12 at 15:31
add a comment |
1
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
Are all the images of the same height ?
– vals
Nov 12 at 15:07
yes, all images have the same size
– Дарья
Nov 12 at 15:31
1
1
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
Are all the images of the same height ?
– vals
Nov 12 at 15:07
Are all the images of the same height ?
– vals
Nov 12 at 15:07
yes, all images have the same size
– Дарья
Nov 12 at 15:31
yes, all images have the same size
– Дарья
Nov 12 at 15:31
add a comment |
2 Answers
2
active
oldest
votes
1
If I have interpreted your request correctly I believe you want all rows to expand equally if the content of one row increases in height.
EXAMPLE
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>answered Nov 12 at 13:16
DreamTeK
15.7k1661117
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px }It solved the same height of top and bottom of cards. But the same height of all top block is yet here
– Дарья
Nov 12 at 15:44
@Дарья Usinggrid-template-rowsovergrid-auto-rowsis what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!
– DreamTeK
Nov 12 at 16:13
add a comment |
0
Your parent container should always include the display:flex; statement. This will ensure any children will get it applied too.
Using the inline flex parameter on your children inside a wrapper with something along the lines of flex:50% applied on both should do the trick.
You can find more resources below, and I will also edit the code once I am done working for you.
http://flexboxgrid.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 12 at 12:41
Maartenw
921213
The container should not always includedisplay:flexif he wants to usegrid, Which he should as it's a two dimensional framework in the example.
– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
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
});
}
});
draft saved
draft discarded
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%2f53262278%2falign-heights-of-daughter-blocks-of-different-blocks-css-flex-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If I have interpreted your request correctly I believe you want all rows to expand equally if the content of one row increases in height.
EXAMPLE
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>answered Nov 12 at 13:16
DreamTeK
15.7k1661117
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px }It solved the same height of top and bottom of cards. But the same height of all top block is yet here
– Дарья
Nov 12 at 15:44
@Дарья Usinggrid-template-rowsovergrid-auto-rowsis what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!
– DreamTeK
Nov 12 at 16:13
add a comment |
1
If I have interpreted your request correctly I believe you want all rows to expand equally if the content of one row increases in height.
EXAMPLE
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>answered Nov 12 at 13:16
DreamTeK
15.7k1661117
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px }It solved the same height of top and bottom of cards. But the same height of all top block is yet here
– Дарья
Nov 12 at 15:44
@Дарья Usinggrid-template-rowsovergrid-auto-rowsis what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!
– DreamTeK
Nov 12 at 16:13
add a comment |
1
1
1
If I have interpreted your request correctly I believe you want all rows to expand equally if the content of one row increases in height.
EXAMPLE
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>answered Nov 12 at 13:16
DreamTeK
15.7k1661117
If I have interpreted your request correctly I believe you want all rows to expand equally if the content of one row increases in height.
EXAMPLE
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr
}
.cat-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.cat-card img {
max-width: 200px;
}
.long-description{
grid-column: 1 / 3;
border-top:1px solid #ddd;
}<div class="Grid">
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
<div class="cat-card">
<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
</div>
</div>answered Nov 12 at 13:16
DreamTeK
15.7k1661117
edited Nov 12 at 13:28
answered Nov 12 at 13:16
DreamTeK
15.7k1661117
answered Nov 12 at 13:16
DreamTeK
15.7k1661117
answered Nov 12 at 13:16
DreamTeK
15.7k1661117
15.7k1661117
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px }It solved the same height of top and bottom of cards. But the same height of all top block is yet here
– Дарья
Nov 12 at 15:44
@Дарья Usinggrid-template-rowsovergrid-auto-rowsis what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!
– DreamTeK
Nov 12 at 16:13
add a comment |
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px }It solved the same height of top and bottom of cards. But the same height of all top block is yet here
– Дарья
Nov 12 at 15:44
@Дарья Usinggrid-template-rowsovergrid-auto-rowsis what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!
– DreamTeK
Nov 12 at 16:13
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
Yes, it is really close, but I don't like that heights of top and bottom part of cat-card have the same value. And also the height of top part should vary in different rows. So the overflowed text in top right card don't have impact on the bottom cards heights.
– Дарья
Nov 12 at 15:28
I think it's better to use
.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px } It solved the same height of top and bottom of cards. But the same height of all top block is yet here– Дарья
Nov 12 at 15:44
I think it's better to use
.cat-card { grid-template-rows: 1fr; } .long-description { padding: 10px } It solved the same height of top and bottom of cards. But the same height of all top block is yet here– Дарья
Nov 12 at 15:44
@Дарья Using
grid-template-rows over grid-auto-rows is what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!– DreamTeK
Nov 12 at 16:13
@Дарья Using
grid-template-rows over grid-auto-rows is what I would normally use however I thought you specifically wanted to maintain the maintain heights across rows!– DreamTeK
Nov 12 at 16:13
add a comment |
0
Your parent container should always include the display:flex; statement. This will ensure any children will get it applied too.
Using the inline flex parameter on your children inside a wrapper with something along the lines of flex:50% applied on both should do the trick.
You can find more resources below, and I will also edit the code once I am done working for you.
http://flexboxgrid.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 12 at 12:41
Maartenw
921213
The container should not always includedisplay:flexif he wants to usegrid, Which he should as it's a two dimensional framework in the example.
– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
add a comment |
0
Your parent container should always include the display:flex; statement. This will ensure any children will get it applied too.
Using the inline flex parameter on your children inside a wrapper with something along the lines of flex:50% applied on both should do the trick.
You can find more resources below, and I will also edit the code once I am done working for you.
http://flexboxgrid.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 12 at 12:41
Maartenw
921213
The container should not always includedisplay:flexif he wants to usegrid, Which he should as it's a two dimensional framework in the example.
– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
add a comment |
0
0
0
Your parent container should always include the display:flex; statement. This will ensure any children will get it applied too.
Using the inline flex parameter on your children inside a wrapper with something along the lines of flex:50% applied on both should do the trick.
You can find more resources below, and I will also edit the code once I am done working for you.
http://flexboxgrid.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 12 at 12:41
Maartenw
921213
Your parent container should always include the display:flex; statement. This will ensure any children will get it applied too.
Using the inline flex parameter on your children inside a wrapper with something along the lines of flex:50% applied on both should do the trick.
You can find more resources below, and I will also edit the code once I am done working for you.
http://flexboxgrid.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 12 at 12:41
Maartenw
921213
answered Nov 12 at 12:41
Maartenw
921213
answered Nov 12 at 12:41
Maartenw
921213
answered Nov 12 at 12:41
Maartenw
921213
921213
The container should not always includedisplay:flexif he wants to usegrid, Which he should as it's a two dimensional framework in the example.
– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
add a comment |
The container should not always includedisplay:flexif he wants to usegrid, Which he should as it's a two dimensional framework in the example.
– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
The container should not always include
display:flex if he wants to use grid, Which he should as it's a two dimensional framework in the example.– DreamTeK
Nov 12 at 12:47
The container should not always include
display:flex if he wants to use grid, Which he should as it's a two dimensional framework in the example.– DreamTeK
Nov 12 at 12:47
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
You could overwrite it in the wrapper. When making use of flexbox your parent container SHOULD always include it. Even if a child container does not, you can override it using the display: grid OP has mentioned. @DreamTeK
– Maartenw
Nov 12 at 12:48
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53262278%2falign-heights-of-daughter-blocks-of-different-blocks-css-flex-grid%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
1
It'd be much more helpful if you add your CSS in the question.
– Mav
Nov 12 at 12:38
From my experience this is not doable with CSS alone, neither flex, grid, float or any other technique. A future addition to the CSS syntax (sub-grid) might change this situation, but that's written in the stars. You will need to use some JS
– HerrSerker
Nov 12 at 12:53
Are all the images of the same height ?
– vals
Nov 12 at 15:07
yes, all images have the same size
– Дарья
Nov 12 at 15:31