Jump to content

Unequal white space distribution with multi-column layout

Recommended Posts

I noticed that multiple sections with different number of columns per section on Details DataPages can lead to unequal white space distribution.

It happens because CSS grid-template columns are not equal:


I am sharing the following JavaScript that addresses this matter:


if(typeof mainDataPageReadyHandler == 'undefined') {

const GetNumberOfGridColumns = (columnTemplateString) => {
return columnTemplateString.split(' ').length

const getSectionWidth = (HTMLSection) => {
return parseFloat(window.getComputedStyle(HTMLSection).getPropertyValue('width').replace('px', ''))

const generateGridTemplateColumnsString = (totalGridColumnsWidth, numberOfGridColumns) => {
let gridTemplateColumnsString = ''
let columnWidth = totalGridColumnsWidth/numberOfGridColumns
for (let i=0; i<numberOfGridColumns; i++ ) {
gridTemplateColumnsString+= `${columnWidth}px `
return gridTemplateColumnsString

const setGridTemplateLayout = (HTMLSection, columnTemplateStr) => {
HTMLSection.style = `grid-template-columns: ${columnTemplateStr};`

const mainDataPageReadyHandler = () => {
let section = document.querySelector('section[id*="cbTable"]')
let gridComputedStyleArr = window.getComputedStyle(section).getPropertyValue('grid-template').split(' / ')
let columnTemplateString = gridComputedStyleArr[1]
setGridTemplateLayout(section, generateGridTemplateColumnsString(getSectionWidth(section), GetNumberOfGridColumns(columnTemplateString)))
window.addEventListener('resize', mainDataPageReadyHandler)
document.addEventListener('DataPageReady', mainDataPageReadyHandler)


Hope it helps somebody. If you notice any corner cases that were not considered, feel free to leave your suggestion

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...