Hi,
I have these 3 columns, and it was built using a grid. How do I make the grey background the same height for all columns? Ideally not changing this html structure and using css only.
The height can't be fixed, of course.
I tried making the div "content" 100% height but doesn't work.
Thanks!
Here's a link to the code / live example:
And here's the code:
I have these 3 columns, and it was built using a grid. How do I make the grey background the same height for all columns? Ideally not changing this html structure and using css only.
The height can't be fixed, of course.
I tried making the div "content" 100% height but doesn't work.
Thanks!
Here's a link to the code / live example:
And here's the code:
HTML:
<div class="block-news__container">
<div class="_item"><img alt="image-news-1" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a href="#" target="_blank"><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png"> </a>
</div>
</div>
<div class="_item"><img alt="image-news-2" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit </p><a href="#" target="_blank"><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png"> </a>
</div>
</div>
<div class="_item"><img alt="image-news-3" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in </p><a href="#" target="_blank"><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png"> </a>
</div>
</div>
</div>
CSS:
.block-news__container {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 30px;
}
.block-news__container ._item {
width: 100%;
}
.block-news__container ._item ._image {
width: 100%;
height: 310px;
object-fit: cover;
}
.block-news__container ._item ._content {
background-color: #ccc;
padding: 50px 30px 80px;
position: relative;
margin-top: 10px;
}