CSS grid tracks remain fixed in size while other tracks expand

Why won't the grid track cells dynamically shrink when other cells are enlarged in the following code?

In this snippet, hovering over any track section causes that cell to grow to 75% of the viewpoint. However, instead of the other sections shrinking to fit the newly sized section, they remain at their original size, causing the cells to extend beyond the grid's boundaries.

I want to be able to resize sections of the grid by hovering over them while having the other sections adjust their size accordingly. Is there a way to achieve this, and why isn't my code working as expected?

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}
<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

htmlcsscss-grid

Answer №1

By setting 1fr for both rows and columns in your grid, you are evenly distributing the horizontal and vertical space among the grid items. Changing this to auto for rows and columns will show some improvements, but there may still be white spaces around hovered grid items:

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto auto; /* changed */
  grid-template-rows: auto auto; /* changed */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}
<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

Solution

You can try the following:

  • Implement a 2-column layout using grid-template-columns: 1fr 1fr
  • Utilize implicit rows with grid-auto-rows: 1fr

For a demonstration, refer to code snippet below:

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  grid-auto-rows: 1fr; /* implicit rows */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}
<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

To learn more about Explicit and Implicit Grids, visit: CSS Grid unwanted column added automatically.

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

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

javascriptclasshtmlfacebook-like

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

Using JQuery, identify cells located in the first column of a table excluding those in the header section

In the past, I had code that looked like this: $(elem).parents('li').find(...) I used this code when elem was an item in a list, making it easy to reference all items in the list. But now, I've made some changes and decided to use a table ...

javascriptjqueryhtmljquery-uijquery-selectors

Positioning child divs using CSS

I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...

cssposition

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

htmlcssbootstrap-4

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

Ways to evenly distribute children in a row using CSS

https://i.stack.imgur.com/HmziN.png The image above showcases the desired effect I am aiming for. It is important to note that the width of the container div may vary. The child elements should have consistent spacing between each other as well as the le ...

css

What causes the unexpected outcome when applying theme overrides in Mui V5?

I am looking to adjust the border radius of all input fields in my project. Specifically, I would like the TextField component to have a border radius of https://i.stack.imgur.com/ULEGj.png instead of https://i.stack.imgur.com/NWmUe.png. According to the M ...

cssmaterial-ui

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

csssvgmask

Displaying information stored in a database as notifications in the notification icon within the HTML/PHP header

Within my MySQL database, there exists a table named order_detail. This table is populated with values from my android app. I am looking to display the order_id as a notification in my admin panel, which is built using HTML/PHP. The attributes of the orde ...

phpandroidhtmlmysql

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid

What is causing the fluctuation in the width?

I am struggling to understand this portion of CSS code. When I resize the page, one button sometimes overlaps with the edit box. While debugging in Firebug, I noticed that the width is displayed as 0 for a container. Adding some width brings the button bac ...

htmlcss

Loop through each JSON object and insert it into an HTML element

I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...

javascriptjqueryhtmljson

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

htmlcssimagepositioninginline-styles

Width of the `div` element is expanding

I'm encountering an issue where a div container is automatically stretching to the full width of the page, instead of adjusting to fit the content within it. Below is the HTML code snippet: <!doctype html> <html> <!-- Head --> <h ...

htmlcss

Utilize Vuetify to showcase a vertical layout consisting of a header and a v-card, occupying the full height

<template> <div> <div style="height: 20px; color: yellow"> test </div> <v-card class="markdown-preview" tile> <v-card-text v-html="previewText"> </v-card-text> ...

javascripthtmlcssvue.jsvuetify.js