Equally distribute grid column width inside container according to their content dimensions

Question

Equally distribute grid column width inside container according to their content dimensions

I am facing a challenge with my side-by-side grid columns. I want the grid to always be the width of its container, ensuring that as much content from each column is visible as possible within that space.

In my demo, the grid is currently set at 300px wide with both columns being content editable for dynamic changes in length. Despite using

grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr);

, I have not been able to achieve the desired outcome.

When the total content width exceeds 300px, the grid overflows horizontally instead of automatically adjusting the column widths to fit accordingly:

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

My goal is to constrain the grid's width to 300px and ensure that the widest cell shrinks enough to display as much content as possible from the smaller cell while applying overflow-x: ellipsis.

This balancing act should occur both ways: shrinking wider cells until proportional balance is achieved.

The existing CSS properties don't seem to allow for this behavior without depending on JavaScript calculations or complex solutions.

If anyone has a CSS-only solution or an alternative approach that requires minimal JavaScript intervention, I would greatly appreciate your input.

html css css-grid

Answer 1

Answer №1

Here is a scenario where combining flexbox with grid proves to be the ideal solution. By placing a flex element within a grid row, you can easily achieve the desired grow and shrink capabilities with minimal css and no need for JS.

In the example provided below, the column containing the most content will expand without encroaching into the adjacent column, while the other column will shrink proportionally. The child elements of the flex container are configured to either grow and shrink equally (flex: 1 1) or occupy 150px (flex: 1 1 150) of available space if the content width is insufficient. The flex-basis is set to 150, which is half of the specified width. Adjust the flex-basis accordingly for wider widths.

*, ::before, ::after {
    box-sizing: border-box;
}

body {
    width: 300px;
}
    
html * {
    border: 1px solid black;
}

.flex-col {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    
}

.flex-col > * {
    flex: 1 1 150;
}

.col {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div class="flex-col">
        <div class="col" contenteditable>Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>
        <div class="col" contenteditable>
            Alias, soluta Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis natus odio dolorum. Dolorem minus, labore distinctio eum praesentium eos ullam ducimus repellat, rerum vel eveniet soluta laborum odit odio sequi. </div>
</div>

Answer 2

Here is a scenario where combining flexbox with grid proves to be the ideal solution. By placing a flex element within a grid row, you can easily achieve the desired grow and shrink capabilities with minimal css and no need for JS.

In the example provided below, the column containing the most content will expand without encroaching into the adjacent column, while the other column will shrink proportionally. The child elements of the flex container are configured to either grow and shrink equally (flex: 1 1) or occupy 150px (flex: 1 1 150) of available space if the content width is insufficient. The flex-basis is set to 150, which is half of the specified width. Adjust the flex-basis accordingly for wider widths.

*, ::before, ::after {
    box-sizing: border-box;
}

body {
    width: 300px;
}
    
html * {
    border: 1px solid black;
}

.flex-col {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    
}

.flex-col > * {
    flex: 1 1 150;
}

.col {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div class="flex-col">
        <div class="col" contenteditable>Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>
        <div class="col" contenteditable>
            Alias, soluta Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis natus odio dolorum. Dolorem minus, labore distinctio eum praesentium eos ullam ducimus repellat, rerum vel eveniet soluta laborum odit odio sequi. </div>
</div>

Answer 3

Answer №2

It seems like your goal is to create a two-column grid with fixed widths where the column sizes adjust based on the content they hold (with text that overflows being truncated). While the code below can help you achieve this to some extent, there may be issues when the total text content exceeds the grid width. In such cases, the columns will not resize proportionally beyond the grid width. Additionally, if you intend to use contenteditable elements within your grid, certain browsers might stop displaying input once text starts overflowing due to the combination of overflow: hidden and text-overflow: ellipsis properties (resulting in seemingly empty columns with excess characters).

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: 300px;
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="grid">
  <div class="column" contenteditable="true">
    abcdefghijklmnop
  </div>
  <div class="column" contenteditable="true">
    abcdefghijklmnopqrstuvwxyz
  </div>
</div>

Answer 4

It seems like your goal is to create a two-column grid with fixed widths where the column sizes adjust based on the content they hold (with text that overflows being truncated). While the code below can help you achieve this to some extent, there may be issues when the total text content exceeds the grid width. In such cases, the columns will not resize proportionally beyond the grid width. Additionally, if you intend to use contenteditable elements within your grid, certain browsers might stop displaying input once text starts overflowing due to the combination of overflow: hidden and text-overflow: ellipsis properties (resulting in seemingly empty columns with excess characters).

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: 300px;
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="grid">
  <div class="column" contenteditable="true">
    abcdefghijklmnop
  </div>
  <div class="column" contenteditable="true">
    abcdefghijklmnopqrstuvwxyz
  </div>
</div>

Equally distribute grid column width inside container according to their content dimensions

Answer №1

Answer №2

Similar questions

Use CSS to activate a sibling div when hovering over a button within the same div that contains the button

Steps for adding a border to kendo grid row hover

How can I troubleshoot the overflow-y problem in a tab modal from w3 school?

Tips for utilizing jQuery to display images similar to videos

How can I connect a custom Web Resource button in Dynamics CRM 2015 to a specific function within a Javascript Library integrated into the form?

Images are not loading properly on the website when viewed on an iPad

The code functions properly when tested on a local server, but doesn't produce any results when

Click to switch CodeMirror's theme

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Issue with CSS hover effect not being detected in IE 7 on a div element

Creating an image overlay within HTML text in NSAttributedString with CSS: A step-by-step guide

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Bring life to the process of adding and removing DOM elements through animation

Deactivating Webkit Input Form Shadow

CSS technique to display background on hover

Customizing Bootstrap Navigation: Creating Space Between Menu Items

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

Customize cursor using CSS

Understanding the response format in jQuery and AJAX

Confirm that the phone number is in the correct format using HTML