Is this layout possible with CSS only? [closed]

Question

Can anyone think of a way to do this with CSS only? The only way I can think would be to use subgrid but browser support is not good enough for that yet.

I'd like to keep the large text all wrapped in an <h1> tag if possible, which is proving difficult.

I think I'll have to use javascript to calculate the width of the last word of the title and use that to offset the paragraph.

Main title could be 2 or 3 lines, and paragraph could also be up to 3 lines.

My current HTML is below, but can easily change it.

Thanks

<div class="home-hero-banner-slide-title">
  <h1>
    <span>Line 1</span>
    <span>Line 2</span>
    <span>Line 3</span>
  </h1>
  <p class="home-hero-banner-slide-paragraph">paragraph here</p>
</div>

Answer 1

Have a look at this fiddle, might help since you are only relying on CSS https://jsfiddle.net/L670c1sg/

.atul {
  display: grid;
  grid-template-columns: repeat(400, .25%);
  grid-auto-rows: 50px; /* for demo only */
  grid-row-gap: 30px;   /* note that you need to create column gaps through
                           the proper distribution of columns, because if you
                           use `grid-column-gap`, it will add a gap between
                           all 400 columns */
}

.card:nth-child(1) {
  grid-column: 1 / 180;
  grid-row: 1 / 3;
}

.card:nth-child(2) {
  grid-column: -1 / -210; /* starting at the end line of the grid
                             (works only in explicit grids) */
  grid-row: 1 / 2;
}

.card:nth-child(3) {
  grid-column: -1 / -210;
  grid-row: 2 / 3;
}

/* starting at the 4th item, target even items only */
.card:nth-child(n + 4):nth-child(even) {
  grid-column: 1 / 195;
}

.card:nth-child(n + 4):nth-child(odd) {
  grid-column: -1 / -195;
}

.card:nth-child(4),
.card:nth-child(5) {
  grid-row: 3;
}

.card:nth-child(6),
.card:nth-child(7) {
  grid-row: 4;
}

.card:nth-child(8),
.card:nth-child(9) {
  grid-row: 5;
}

.card:nth-child(10),
.card:nth-child(11) {
  grid-row: 6;
}

.card:nth-child(12),
.card:nth-child(13) {
  grid-row: 7;
}

<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: skyblue;">Card 8</div>
  <div class="card" style="background-color: skyblue;">Card 9</div>
  <div class="card" style="background-color: skyblue;">Card 10</div>
  <div class="card" style="background-color: skyblue;">Card 11</div>
  <div class="card" style="background-color: skyblue;">Card 12</div>
  <div class="card" style="background-color: skyblue;">Card 13</div>
</div>

Answer 2

Once with grid, once with flex, and a version without flex or grid.

span {
  z-index: 1;
  position: absolute;
  color: hotpink;
  width: 100%;
  text-align: center;
}

.home-hero-banner-slide-title {
  width: 100%;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  width: 100%;
  border-radius: 5px;
}

h1 {
  margin-top: 5em;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

h1:first-child {
  margin-top: 0;
}

body {
  margin: 0;
}

.home-hero-banner-slide-title > div,
.wrapper > div,
.container > div {
  display: inherit;
}

<h1>W/ Flex</h1>

<div class="home-hero-banner-slide-title">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <p class="home-hero-banner-slide-paragraph">paragraph here</p>
</div>

<h1>W/O anything</h1>

<div class="wrapper">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
</div>

<h1>W/ Grid</h1>

<div class="container">
  <div>
    <span>Line 1</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 2</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
  <div>
    <span>Line 3</span>
    <img src="https://dummyimage.com/900x300/000/fff">
  </div>
</div>