CSS Grids

Get a lower column to stretch up.

by Jason

HTML

<p><button>Click to toggle D's size</button></p>
<ul>
  <li class="a">A</li>
  <li class="b">B</li>
  <li class="c">C</li>
  <li class="d">D</li>
</ul>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-areas:
    "a b"
    "c b"
    "c d";
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-gap: 10px;
  align-items: start;
}
.a { grid-area: a; }
.b { grid-area: b; height: 5em; }
.c { grid-area: c; height: 10em; }
.d { grid-area: d; }

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}


button {
  background: #f0f;
  color: #000;
  border-color: #00f;
  margin: 0 0 1em;
}

JavaScript

$("button").click(function() {
	var x = $("li.d");
  if(x.html() === "D") {
  	x.html("D<br>adding content<br>makes the box<br>slide up<br> like I want it to");
  } else {
  	x.html("D");
  }
});