Constant height grids with block grid

[craigs100 (Craig)]

Trying to replicate an old site’s CSS grid with the new blockgrid. It has 6 blocks in 2 rows. Each row’s blocks are the same height, even though the height of the content is different.

In the attached image, the top 6 block are the old site with css grid (and flexbox to stretch the content). The bottom 6 boxes are the new block grid.

My problem is that I can’t work out what I need to do to replicate this in blockgrid. I have a layout block of 3 horizontal blocks, each section of which has another block containing a title, RTE and button vertically. Is it possible, given the way block grid works to get all three layout blocks the same height?

I’d be interested to know if anyone has any hacks for this.

[dalyUSN (Paul Daly (uSkinned.net))]

Hey @craigs100

Here’s how I would structure the CSS and HTML of a similar layout with Flexbox…

CSS:

.flex-container * {
  box-sizing:border-box;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
  margin: 0 -15px;
  padding: 0 15px;
}
.flex-item {
  flex: 0 0 33.3333333%;
  padding: 15px;
}
.flex-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px; 
}
.flex-inner > h2 {
  margin: 0; padding: 0;
}
.flex-text {
  padding-bottom: 15px; 
}
.flex-button {
  flex: 1;
  align-content: end;
}
.flex-button > a {
  display: block;
  padding: 5px;
  border: 1px solid #000;
}

HTML:

<div class="flex-container">

  <div class="flex-item">
  	<div class="flex-inner" style="background:orange">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>
  
  <div class="flex-item">
  	<div class="flex-inner" style="background:green">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>

  <div class="flex-item">
  	<div class="flex-inner" style="background:yellow">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>

  <div class="flex-item">
  	<div class="flex-inner" style="background:blue">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>

  <div class="flex-item">
  	<div class="flex-inner" style="background:yellow">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>

  <div class="flex-item">
  	<div class="flex-inner" style="background:pink">
      <h2>Column</h2>
      <div class="flex-text">
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
        <p>Hello World</p>
      </div>
      <div class="flex-button"><a href="#">LINK HERE</a></div>
    </div>
  </div>
  
</div>

The result:

The key to achieving equal columns is how you structure the internal code of the items. You’ll note that most of the styling is happening on the .flex-inner, for example, adding height:100%. I then use the align-content: end; on the .flex-button to ensure that it sits at the bottom.

The result now shows the equal columns with the button correctly aligned to the bottom. You’ll need to add a little more styling to match your design exactly. My example is just the basics for the flexbox itself.

I hope that helps get you started!

Cheers
Paul from uSkinned!