Avoid letting a particular grid cell containing long text dictate the column width in CSS grid

Within a grid layout featuring two columns, multiple rows contain similar content. However, the final row holds a longer text in its first cell.

To minimize the width of the container without linebreaks/soft wraps for the shorter texts in the regular columns (where `min-content` is not applicable), I utilize `display: inline-grid` and `grid-template-columns: auto auto`. Nonetheless, I do desire soft wraps for the last row's text so it does not dictate the width of the row or container.

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
}
<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>
or view on jsFiddle.

Is there a CSS-only solution to prevent the last row's cell from determining the column's width? My initial assumption is that this is not possible, but perhaps a creative approach involving grid restructuring, subgrids, an empty column, or clever use of CSS functions could provide a workaround.

As the cell texts are dynamic, predefining their sizes is unfeasible. Hence, a fixed-size solution such as `grid-template-columns: fit-content(130px) auto;` would not suffice. Nevertheless, the code snippet below visually conveys my ideal outcome:

.grid-container {
  display: inline-grid;
  grid-template-columns: fit-content(120px) auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
}
<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>

Answer №1

Consider utilizing the contain:inline-size property, which essentially treats the content as having zero width in terms of its impact on grid column sizing.

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
  contain: inline-size;
}
<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display HTML content within a dynamically loaded div using AJAX

Hey there, I'm really struggling to figure out why this issue keeps happening. I've spent over 5 hours researching online and trying to troubleshoot with no luck. Let me explain the situation. I have a setup with 3 pages (index.html, index.js, a ...

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

What is the best way to finish up the JavaScript code below?

Having just started learning JavaScript, I am struggling to figure out how to use JavaScript to clear the text in a text box and move it below the box when a user starts typing. I've been watching this tutorial http://codepen.io/ehermanson/pen/KwKWEv ...

Is it possible to integrate external search functionality with Vuetify's data table component

I am currently working with the v-data-table component from Vuetify, which comes with a default filter bar in its properties. This table retrieves data from a local JSON file. The issue arises when I have another external component, a search bar created u ...

How can I make the background of a button change when I move my cursor over it

Is it possible to change the background image of a button when hovering over it? Perhaps have the image transition from left to right for a fading effect? Can this be accomplished? ...

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

Manipulating the visibility and opacity of a div element using CSS

Here is the code snippet I am working with: <div class="contact-item" onmouseover="div_ContactItem_mouseover(this)"> </div> <div id="div_ItemOver" style="display: none;" class="contact-item-hover" onmouseout="div_ItemOver_mouseout ...

How can one effectively pass arguments to jQuery in order to set the tooltip text for Bootstrap from an element within the HTML body

I'm working with a simple markup that triggers a colorful bootstrap tooltip when hovering over a button in the body. Currently, the tooltip text is hardcoded into the jQuery function. I want to find a way to pass the tooltip text to the jQuery functio ...

What factors dictate the color of rows in jquery datatable designs?

Within the jQuery datatable styles, such as "smoothness," the rows are displayed in different colors. What factors determine which colors are shown on each row? And is there a way to customize this color scheme? Refer to the example below from their sampl ...

Employing jQuery's offset() method for scripting

Issue: The problem I'm facing is that after clicking on the label where the date should be entered, the calendar is not appearing as expected. I tried using a jQuery script to darken the background, but then the calendar is not displaying in the corre ...

Optimize Page Speed by Delaying the Loading of Slideshow Images

My main issue with reducing my pagespeed is the slideshow I have implemented. I currently have 17 rather large images in the slideshow, but for simplicity, I will only show the code for 3 images below. I am trying to find a way to load the first image as a ...

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

Semi-circle border using CSS

Looking to replicate the circular design shown in the image using CSS. Any tips on achieving this? ...

Display information using HTML elements within a loop in JavaScript

I am facing an issue with iterating over an array of objects in JavaScript. Each object contains multiple parameters, and my goal is to extract the data from each object and display it in a table or a grid format. Here is an example of my code: function ...

Issue with Django app: Bootstrap 4 modal hidden behind background

Having exhaustively researched this issue, I am still unable to resolve it with the outdated Bootstrap solutions available. The problem arises when I click on the button - the modal appears behind the background instead of in front. Most suggestions indica ...

Tips for creating a double background color effect outside of a container

I want to create a footer similar to this design: https://i.sstatic.net/BIn4C.png html <footer> <div class="container"> <div class="row"> <div class="col-7 copyright__text py-3"> COPYRIGHT ...

CSS seems to be ineffective on mobile devices

While testing a website, I noticed that it functions perfectly on desktop and laptop devices. However, when accessed using a mobile device, the layout is completely messed up. You can view the example page at . All CSS and JS files are accessible in the s ...

What is the best way to search for a specific term in Visual Studio Code/IDE without including another term in the search results?

Is it feasible to search for instances in my code where the term "<img" appears without being accompanied by the term "alt="? This would help me locate all image tags that do not have the alt attribute. Can you provide guidance on how this can be achiev ...

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish t ...

What is the best way to convert the value of "range" to floating point numbers in JavaScript?

Why is it that when I input a float number, like "3.4567890", as the value in an input field, it automatically gets converted to type 'int'? This conversion is not desired, as I want the value to remain as a 'number' or 'float&apos ...