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?

.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

The canvas game's animation can only be activated one time

Always ensure that only one div is visible at a time

Minifying Angular using grunt leads to 'Error initializing module' issue

Ways to incorporate color gradients into the corners of CSS cards

What is the best way to incorporate CSS from node_modules into Vite for production?

Element on webpage "Expands" When Scrolled into Visibility

Facebook and the act of liking go hand in hand, growing together

Utilize the <wbr> tag within FormattedMessage and assign it as a value while coding with TypeScript

AngularJS - Utilizing Google's Place Autocomplete API Key

using database URL as an AJAX parameter

Navigating through sibling elements can be accomplished by using various methods in

What are some ways to enhance Redux's performance when handling rapid updates in the user interface?

Can a YouTube video be triggered to play when a specific CSS style is selected?

Using identical CSS for two separate layouts

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

Exploring the location where an XMLHttpRequest/Ajax link is executed

picture protrudes from the frame [WordPress template]

Obtain a collection of the corresponding keys for a given value from dictionaries

The parameter value experiences an abrupt and immediate transformation

Why does my script seem to be missing from this GET request?