0

I am trying to create a 3 column layout with text content over an image.

  • The text content is dynamic and should have a headline and a paragraph.
  • The layout should be responsive (mobile: 1 column, tablet 2 columns, desktop 3 columns).
  • The text content must be aligned to the end of the column.
  • The paragraphs must start at the same height.
  • If the headlines need more lines, they should align at the bottom.

The challenge is to create it without setting any height, min-height or any other hardcoded value.

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
  margin: 0;
  background-color: lightblue;
  display: grid;
  place-items: center;
}

img {
  max-width: 100%;
  height: auto;
}

.card-container {
  width: 100%;
  max-width: 60rem;
}

@media (min-width: 70rem) {
  .card-container {
    /*   display: flex;
  align-items: flex-start; */
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  }
}

.card {
/*   width: 33.33333%; */
  position: relative;
  border: 2px solid black;
}

.card > img {
  display: block;
  width: 100%;
  opacity: 0.3;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  
/*   display: grid;
  grid-template-rows: 1fr 1fr; */
  
  display: flex;
  flex-direction: column;
}

.card-content h2 {
  margin-top: auto;
  margin-bottom: 0;
}
<div class="card-container">
  <div class="card">
    <img src="https://picsum.photos/500/1000" alt="">
    <div class="card-content">
        <h2>Short headline</h2>
      <p class="card-text">Prow scuttle parrel provost Sail ho shrouds spirits boom.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/1000" alt="">
    <div class="card-content">
        <h2>Short headline</h2>
      <p class="card-text">Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/500/1000" alt="">
    <div class="card-content">
        <h2>Headline stretching at least to 2 lines</h2>
      <p class="card-text">Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p>
    </div>
  </div>
</div>

I have tried flexbox and grid but I can't get the paragraphs aligned to the same starting point. Here is a codepen with my code: https://codepen.io/takaras/pen/dyJQBjm

Here what I want to achieve: Layout with 3 columns and text aligned to the end of each column

dimi
  • 1
  • 2
  • @SigurdMazanti thanks for the hint - **subgrid** is the right css property to use here but it is not yet production ready (only firefox supports it). I have updated my codepen with the solution. If anyone knows a better (browser compatible) solution, feel free to add it. – dimi Apr 17 '22 at 20:45
  • there is a neat javascript solution there that i've used a couple times https://stackoverflow.com/a/69727173/14776809 it does use the `min-height`-property but its defined dynamically, not sure if that is in conflict with what you want? – Sigurd Mazanti Apr 17 '22 at 23:00

0 Answers0