Ensuring grid columns are equal for varying text sizes

Question

Ensuring grid columns are equal for varying text sizes

I am looking to achieve equal width and spacing for columns without using the width, min-width, max-width properties. Can anyone help me accomplish this using flex or any other method?

https://i.sstatic.net/xo56M.png

.d-flex {
    display: flex;
}
.d-flex .col {
    margin: 5px;
    background: #7adaff;
}

<div class="d-flex">
    <div class="col">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
    </div>
    <div class="col">
        Lorem Ipsum is simply dummy tex
    </div>
    <div class="col">
        Lorem Ipsum
    </div>
    <div class="col">
        Lorem Ipsum
    </div>
    <div class="col">
        Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries,
    </div>
</div>

If you have any questions, feel free to leave a comment.

javascript html jquery css flexbox

Answer 1

Answer №1

There are a few potential approaches to achieve this layout, one utilizing CSS flex-box design and the other CSS Grid. Both methods avoid setting an explicit width, min-width, or max-width. The flex solution incorporates flex-basis, although it may seem like leveraging a loophole:

.d-flex {
  display: flex;
  gap: 5px;
}

.d-flex .col {
  flex-basis: calc((100% - (4*5px))/5);
  background: #7adaff;
}

<div class="d-flex">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy tex
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </div>
</div>

Alternatively, a more practical approach is to utilize CSS Grid and take advantage of the fr fractional units:

.d-flex {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.d-flex .col {
  background: #7adaff;
}

<div class="d-flex">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy tex
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </div>
</div>

If you need to adjust column counts dynamically, JavaScript may be necessary for this task. The implementation will vary based on specific requirements and could extend beyond the original question scope. Here's a basic example:

// JavaScript utilities:
const D = document,
  create = (tag, props) => Object.assign(D.createElement(tag), props),
  get = (selector, context = D) => context.querySelector(selector),
  sampleText = [
    "Lorem", "ipsum", "dolor", "sit", ... // omitted for brevity 
  ],
  sampleWordCount = sampleText.length,
  addContent = () => {
    let parent = get('.d-flex'),
        text = sampleText.slice(0, Math.floor(Math.random() * sampleWordCount)).join(' '),
        div = create('div', {
          className: 'col',
          textContent: text,
        });
    parent.append(div);
    parent.style.setProperty('--childCount', parent.children.length);
  },
  button = get('button');

button.addEventListener('click', addContent);

.d-flex {
  display: grid;
  grid-template-columns: repeat(var(--childCount), 1fr);
  gap: 5px;
}

.d-flex .col {
  background: #7adaff;
}

<button type="button" id="add">Add content</button>
<div class="d-flex" style="--childCount: 2;">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text
  </div>
</div>

JS Fiddle demo.

References:

Bibliography:

"A Complete Guide to Flexbox," CSS-Tricks
"A Complete Guide to Grid," CSS-Tricks.
"Basic concepts of flexbox," MDN
"CSS Grid Layout," MDN
"Why I use grid over flexbox for this common layout," Kevin Powell (SO), on YouTube

Answer 2

There are a few potential approaches to achieve this layout, one utilizing CSS flex-box design and the other CSS Grid. Both methods avoid setting an explicit width, min-width, or max-width. The flex solution incorporates flex-basis, although it may seem like leveraging a loophole:

.d-flex {
  display: flex;
  gap: 5px;
}

.d-flex .col {
  flex-basis: calc((100% - (4*5px))/5);
  background: #7adaff;
}

<div class="d-flex">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy tex
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </div>
</div>

Alternatively, a more practical approach is to utilize CSS Grid and take advantage of the fr fractional units:

.d-flex {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.d-flex .col {
  background: #7adaff;
}

<div class="d-flex">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy tex
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </div>
</div>

If you need to adjust column counts dynamically, JavaScript may be necessary for this task. The implementation will vary based on specific requirements and could extend beyond the original question scope. Here's a basic example:

// JavaScript utilities:
const D = document,
  create = (tag, props) => Object.assign(D.createElement(tag), props),
  get = (selector, context = D) => context.querySelector(selector),
  sampleText = [
    "Lorem", "ipsum", "dolor", "sit", ... // omitted for brevity 
  ],
  sampleWordCount = sampleText.length,
  addContent = () => {
    let parent = get('.d-flex'),
        text = sampleText.slice(0, Math.floor(Math.random() * sampleWordCount)).join(' '),
        div = create('div', {
          className: 'col',
          textContent: text,
        });
    parent.append(div);
    parent.style.setProperty('--childCount', parent.children.length);
  },
  button = get('button');

button.addEventListener('click', addContent);

.d-flex {
  display: grid;
  grid-template-columns: repeat(var(--childCount), 1fr);
  gap: 5px;
}

.d-flex .col {
  background: #7adaff;
}

<button type="button" id="add">Add content</button>
<div class="d-flex" style="--childCount: 2;">
  <div class="col">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="col">
    Lorem Ipsum is simply dummy text
  </div>
</div>

JS Fiddle demo.

References:

Bibliography:

"A Complete Guide to Flexbox," CSS-Tricks
"A Complete Guide to Grid," CSS-Tricks.
"Basic concepts of flexbox," MDN
"CSS Grid Layout," MDN
"Why I use grid over flexbox for this common layout," Kevin Powell (SO), on YouTube

Answer 3

Answer №2

If given the choice, I would opt to define the flex shorthand value individually for each child within the flexbox parent container. By utilizing a custom attribute ([col]) instead of a class (.col), it becomes convenient to adjust column widths as needed (similar to working with grid fractions).

For more detailed information, refer to the CSS code snippet below:

/* Ensure border width is accounted for in total element width */
* { box-sizing: border-box }

/********************/
/* DEFAULT behavior */
/********************/
.d-flex   { display: flex }

[col]     { flex: 1 } /* 1x, all columns equal by default */
[col="2"] { flex: 2 } /* x2, adjust space allocation as necessary */
[col="3"] { flex: 3 } /* x3 */
[col="4"] { flex: 4 } /* x4 */

/*
    'flex' shorthand breakdown: 
        'flex-grow'   - 0 (default, no growth)
        'flex-shrink' - 1
        'flex-basis'  - 0%

    hence 'flex: 1' defaults to 'flex: 1 1 0%'
*/

/*********************************/
/* [OPTIONAL] Responsive Design */
/*********************************/
.d-flex { flex-wrap: wrap } /* default is 'nowrap' */

[col] {
    min-width: min(6rem, 100%); /* Wrap content at specified value */
    /* responsive to viewport width, whichever is smaller */
}

/***************************/
/* DEMO Styling Features */
/***************************/
.d-flex {
    gap: 5px; /* Eliminate the need for margins */
}

.d-flex [col] {
    background: #7adaff;
    padding: 0.5rem; /* Add inner spacing */

    word-break: break-word; /* Break long words if they exceed container */
    -webkit-hyphens: auto;  /* Automatically hyphenate long words */
        -ms-hyphens: auto;  /* Vendor prefixes for optimal support */
            hyphens: auto;
}

<div class="d-flex">
    <div col>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
    </div>
    <div col>
        Lorem Ipsum is simply dummy tex
    </div>
    <div col>
        Lorem Ipsum
    </div>
    <div col>
        Lorem Ipsum
    </div>
    <div col="2"><b>(demo: with 'flex: 2')</b>
        Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries.
    </div>
</div>

Answer 4

If given the choice, I would opt to define the flex shorthand value individually for each child within the flexbox parent container. By utilizing a custom attribute ([col]) instead of a class (.col), it becomes convenient to adjust column widths as needed (similar to working with grid fractions).

For more detailed information, refer to the CSS code snippet below:

/* Ensure border width is accounted for in total element width */
* { box-sizing: border-box }

/********************/
/* DEFAULT behavior */
/********************/
.d-flex   { display: flex }

[col]     { flex: 1 } /* 1x, all columns equal by default */
[col="2"] { flex: 2 } /* x2, adjust space allocation as necessary */
[col="3"] { flex: 3 } /* x3 */
[col="4"] { flex: 4 } /* x4 */

/*
    'flex' shorthand breakdown: 
        'flex-grow'   - 0 (default, no growth)
        'flex-shrink' - 1
        'flex-basis'  - 0%

    hence 'flex: 1' defaults to 'flex: 1 1 0%'
*/

/*********************************/
/* [OPTIONAL] Responsive Design */
/*********************************/
.d-flex { flex-wrap: wrap } /* default is 'nowrap' */

[col] {
    min-width: min(6rem, 100%); /* Wrap content at specified value */
    /* responsive to viewport width, whichever is smaller */
}

/***************************/
/* DEMO Styling Features */
/***************************/
.d-flex {
    gap: 5px; /* Eliminate the need for margins */
}

.d-flex [col] {
    background: #7adaff;
    padding: 0.5rem; /* Add inner spacing */

    word-break: break-word; /* Break long words if they exceed container */
    -webkit-hyphens: auto;  /* Automatically hyphenate long words */
        -ms-hyphens: auto;  /* Vendor prefixes for optimal support */
            hyphens: auto;
}

<div class="d-flex">
    <div col>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
    </div>
    <div col>
        Lorem Ipsum is simply dummy tex
    </div>
    <div col>
        Lorem Ipsum
    </div>
    <div col>
        Lorem Ipsum
    </div>
    <div col="2"><b>(demo: with 'flex: 2')</b>
        Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries.
    </div>
</div>

Ensuring grid columns are equal for varying text sizes

Answer №1

Answer №2

Similar questions

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

Encountering an error in Laravel 5.1 and Vue.js - Error code 21678: Uncaught TypeError: Unable to retrieve 'data' property from null

The customer's status cannot be determined

tips for concealing the sorting icon in the DataTables header upon initial load

"Combining the power of Angularjs and the state

Repetitive bouncing in a trampoline leads to the error message "Call stack has reached maximum size"

issues with the handler not functioning properly in html and javascript

Tips for aligning a div within a flexbox to the bottom position

Transforming Nested JSON Data into an Interactive HTML Table

How to iterate through a Vue data object using forEach loop

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

restructure the HTML based on a jQuery condition

Change all instances of the subtraction symbol to parentheses using jQuery

Automatically adjusting the height of a Bootstrap carousel as the token-input list grows in size

What is the method to set precise values on a range slider?

Function utilizing variables parsed by Angular directive

Personalizing the form controls in Bootstrap for selection options

What is the typical number of open CLI terminals for a regular workflow?

Adding an HTML tag to a div using jQuery