Create Uniform Tiles with Dynamic Content in LWC

Greetings, fellow Trailblazers! In this post, I'll guide you through the process of creating dynamic tiles in Lightning Web Components (LWC) with uniform heights. You might encounter scenarios where each tile contains varying amounts of content, and the challenge is to ensure that all tiles share the same height, creating a visually consistent layout.

It's important to note that we're not fixing a predefined height for all tiles. Instead, we're dynamically adjusting their heights based on the tile with the most extensive content.

While controlling the width of tiles is relatively straightforward with the use of the lightning-layout component, achieving uniform heights for the tiles is the tricky part we'll address.

The Solution

We will use the renderedCallback to calculate the height of the tiles. The first step is to find out the tile with the max height and then set that height to the rest of the tiles.

JS Code

import { LightningElement } from "lwc";

export default class App extends LightningElement {

  renderedCallback(){
    let tiles = this.template.querySelectorAll('.tile');
    let maxHeight = 0;
    tiles.forEach(tile => {
      const content = tile.querySelector('.content');
      const contentHeight = content.getBoundingClientRect().height;
        if (contentHeight > maxHeight) {
          maxHeight = contentHeight;
        }
    });

    // Apply the maximum height to all tiles
    tiles.forEach(tile => {
        const content = tile.querySelector('.content');
        content.style.minHeight = `${maxHeight}px`;
    });
  }
}

HTML Code

<template>
    <div class="slds-grid slds-gutters_x-small slds-wrap">
        <div class="tile slds-col slds-large-size_1-of-2 slds-small-size_1-of-1">
            <div class="content">
                Put your comonent here
            </div>
        </div>
        <div class="tile slds-col slds-large-size_1-of-2 slds-small-size_1-of-1">
            <div class="content">
                Tile 1 - This is some content
                Tile 1 - This is some content
                Tile 1 - This is some content
                Tile 1 - This is some content
            </div>
        </div>
        <div class="tile slds-col slds-large-size_1-of-2 slds-small-size_1-of-1">
            <div class="content">
                Tile 1 - This is some content
            </div>
        </div>
        <div class="tile slds-col slds-large-size_1-of-2 slds-small-size_1-of-1">
            <div class="content">
                Tile 1 - This is some content
            </div>
        </div>
    </div>
</template>

CSS Code

.tile {
    border: 1px solid #ccc;
    padding: 10px;
}

Output Before

The height of each tile is different

Output After

The height of each tile is the same

Live Demo

See the live demo of this code on playground

Further Explanation

The below line queries all the tiles from the component and saves them into the tiles array.

let tiles = this.template.querySelectorAll('.tile');

The below code finds the tiles with the maximum height and saves their height into maxHeight a variable. The getBoundingClientRect() function helps to get the actual height of the current tile. After that code checks if the height is higher than the previously saved height and updates the maxHeight if needed.

let maxHeight = 0;
tiles.forEach(tile => {
  const content = tile.querySelector('.content');
  const contentHeight = content.getBoundingClientRect().height;
    if (contentHeight > maxHeight) {
      maxHeight = contentHeight;
    }
});

The below code sets the maxHeight value to all tiles.

tiles.forEach(tile => {
    const content = tile.querySelector('.content');
    content.style.minHeight = `${maxHeight}px`;
});

Further enhancement

If needed you can set max limit for tile height to prevent them from growing after a certain amount of height.