5

I the following HTML and CSS (the .type-a part), it is using the CSS Grid.

(you can see the CodePen clicking here)

What I need is to make all elements with .col1 class to be correctly aligned on the first column - while at the same time making .col2 span the entire rows.

Changing the HTML is not an option (I know it's easy to fix this by changing the HTML).

We will never know exactly how many rows .col1 will have and I do want to avoid creating 1000 rows to make it work (like you can see on .type-b).

.container {
  display: grid;
  grid-auto-columns: 50%;
  grid-auto-flow: dense;
  /* Decorative */
  color: #ffffff;
  text-align: center;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

// Type B
.type-b>.col2 {
  grid-row: 1 / 100;
}

// Decorative Styles
.divider {
  height: 1px;
  background: #B0BEC5;
  margin: 30px;
}

.content-a {
  background: #5C6BC0;
}

.content-b {
  background: #7E57C2;
}

.content-c {
  background: #AB47BC;
}

.content-d {
  background: #FFA726;
}
<h3>Type A</h3>
<div class="container type-a">
  <div class="col1 content-a">Content A</div>
  <div class="col1 content-b">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
    efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
  </div>
  <div class="col1 content-c">Content C</div>
  <div class="col2 content-d">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="divider"></div>

<h3>Type B (What I want)</h3>
<div class="container type-b">
  <div class="col1 content-a">Content A</div>
  <div class="col1 content-b">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
    efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
  </div>
  <div class="col1 content-c">Content C</div>
  <div class="col2 content-d">
    <img src="https://picsum.photos/200/300">
  </div>
</div>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
António Pinto
  • 388
  • 2
  • 10
  • what is the difference between both ? i see no difference .. – Temani Afif Mar 13 '18 at 22:47
  • You need to use grid-row: span x ; like `.col2 { grid-column: 2; grid-row: span 3; }` https://codepen.io/anon/pen/oqbpBE tutorial : https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row – G-Cyrillus Mar 13 '18 at 23:53
  • 2
    With [CSS Grid Layout Module Level 1](https://www.w3.org/TR/css3-grid-layout/), there is no way to make a column span all rows of the container, unless you know the number of rows, which you don't ("We will never know exactly how many rows.") I guess you can guess :-) https://stackoverflow.com/q/49074633/3597276 – Michael Benjamin Mar 13 '18 at 23:58

1 Answers1

0

It seems that you can set 

.col2 { 
   grid-row-end: span 99999;
}

and it will span as many rows as there are in the grid, unless you have more than 99999. Not ideal, but does seem to work in Firefox and Chrome!

Codepen here: https://codepen.io/anon/pen/qgmpvv

Duncan Thacker
  • 5,073
  • 1
  • 10
  • 20