Adjust the parent element to match the width of the child by utilizing the "display: grid" property

edit: I'm uncertain if this is a duplicate issue. My concern is not about the background color extending beyond the container width, but rather about expanding the container to match the size of its child with display: grid. I have updated the example to clarify my dilemma.

I am constructing a table where each row functions as a CSS grid. This setup allows me to utilize the minmax() property for each cell, creating a scrollable table when the cells reach their minimum size and enabling the table to grow if more space is available.

Everything works well except that the row styles apply only to the container's width.

Please refer to the following example:

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
  margin: 0.5rem;
}

.cell {
  border: 1px solid black;
}
Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Elements with the <code>.row</code> class should expand to fit all the cells.
htmlcsscss-grid

Answer №1

Modifying the row display to inline-grid has proven effective:

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: inline-grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}
Scroll horizontally within the container:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should fill the entire row.

Revision 1

To prevent layout issues where a wide container with narrow children aligns in a single line (as seen in the previous solution), a more complex approach can be used. This involves applying 

display: flex; flex-direction: column
on the parent element, along with additional align-items: start to ensure full-width rows instead of default stretch, which limits row width to the container size.

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}
Scroll horizontally within the container:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

Revision 2

In scenarios where the row needs to span the full width of a wider container exceeding the sum of all columns, an adjustment to Update 1's solution can be made. Instead of using display: flex, opt for display: grid as demonstrated below:

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: grid;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}
Scrolling horizontally inside the container:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

Answer №2

To populate grid-template-columns with the width of each cell, follow these steps:

.row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background: blue;
  height: 3rem;
}

If you want each cell to be 200px wide, include the following code:

.cell {
    min-width: 200px;
    border: 1px solid gray;
}

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

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

javascriptjqueryhtmlcanvassvg

Customizing the size of an SVG shape using CSS properties

I am having trouble adjusting the width of the icon to 100% of the SVG container. This is what I've encountered: And here is the code for the SVG icon <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w ...

htmlcsssvgcss-shapes

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

javascriptjqueryhtml

Automatically adjust multiple images on an HTML webpage

Just starting out with html programming here. Looking to add top margin using a span class, any tips on how to tackle this issue? ...

javascriptjqueryhtmlcss

Is it normal for e.target.result to only work after two or three tries?

Attempting to resize an image on the client side before sending it to the server has been challenging for me. Sometimes, the image does not align correctly with the canvas used for resizing. I have noticed that I need to send the resized image at least tw ...

javascripthtml

Creating a dynamic webpage where multiple images are displayed on a single canvas using

I'm currently working on a chess project where I'm using a canvas to create the game board and draw 32 chess pieces on it. To update the screen when a piece moves, I've implemented requestAnimFrame. However, I'm facing an issue where th ...

html

Can anyone help me identify the issues in my PHP code?

My PHP code doesn't appear to be functioning correctly. Instead of displaying any errors, it simply shows a blank page. Can you identify what I might be doing incorrectly? <?php mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_ ...

phphtmlmysqldatabase

jQuery - Enhancing User Experience with Dynamic Screen Updates

Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...

javascriptjqueryhtmlcss

Switch classes while navigating within a div

My website has a sticky sidebar with a list of cars and their corresponding categories in a table: <ul class = "cars"> <li class=""><a href="javascript:void(0)" class="model" data-id="1"> BMW </a></li> ...... ...

javascriptjqueryhtmlcss

Utilizing the power of Vue 2 and NuxtJS to effortlessly customize the appearance of child components

I am currently working on a Nuxt.js project (still using Vue 2) that consists of two components. I am trying to override the child style with the parent's style, but the ::v-deep pseudo selector doesn't seem to be effective. Regardless of my eff ...

javascriptcssvue.jssassnuxt.js

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Link a function to a button in a 3rd party library

Whenever I click a button, there is a possibility of an alertify alert window appearing randomly. The alertify alert popup serves as a more aesthetically pleasing alternative to the traditional javascript Alert. Alertify library Below is a snapshot depic ...

javascriptjqueryhtmlalertalertify

Modify the style of a webpage through JavaScript

Need help with calling a JS event based on button presses and changing CSS font styling accordingly for each button? Check out the code snippet below: body { background-image: url("back2.jpg"); background-size: 100% 100%; } ...

javascripthtmlcss

Implementing Jquery Table Selection with Custom CSS Class

When I attempted to use the selectable feature on a table with a CSS class applied, the selection did not work. However, when I removed the CSS class, the selection worked perfectly fine. I suspect that the issue lies within the CSS definition, but I' ...

jquerycssselectable

The ease of use and availability of radio buttons

When clicking on the first or second value of the radio button, it selects the first option. Here is the HTML code: @supports(-webkit-appearance: none) or (-moz-appearance: none) { input[type='radio'], input[type='checkbox'] { ...

htmlcss

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

Incorporating an external HTML page's <title> tag into a different HTML page using jQuery

I am faced with a challenge involving two files: index.html and index2.html. Both of these files reside in the same directory on a local machine, without access to PHP or other server-side languages. My goal is to extract the <title>Page Title</ ...

javascriptjqueryhtmlfrontend

Using JQuery to eliminate the current div in an image slider

I currently have an image slider that allows users to switch between images. There are two buttons - one adds a new item to the slider, while the other is supposed to remove the current image from the slider, but it doesn't seem to be working properly ...

javascriptjqueryhtmlcss

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

What is the best way to incorporate the :after pseudo-element in JavaScript code

HTML: This is my current code snippet <div class="one"> Apple </div> I am looking to dynamically add the word "juice" using JavaScript with the .style property. Is there an equivalent of :: after in CSS, where I can set the content in JavaS ...

javascripthtml