Why Are Only Some of My CSS Grid Boxes Expanding When I Hover Over Them

Why are only some of my CSS Grid boxes expanding when I hover over them?

Here is an idea where you can rely on negative margin to create the overlap effect whithout changing the structure and using display:contents

.container {  display: grid;  grid-gap: 10px;  grid-template-columns: repeat(3, minmax(100px, auto));  grid-template-rows: repeat(3, minmax(100px, auto));}
[class^="item"] { text-align: center; box-sizing: border-box; padding: 10%; font-size: 5em; color: #0580d5; transition: .2s;}
[class^="item"]:hover { z-index:2; /*we increase the z-index to cover the other*/ background: /*we this to keep the initial background*/ linear-gradient(rgba(40, 180, 240, .3),rgba(40, 180, 240, .3)), #fff;}
[class^="item"]:nth-child(3n + 1):hover { margin-right:calc(-200% - 20px); /* we remove (2 x grid items + 2 x gap) */}[class^="item"]:nth-child(3n + 2):hover { margin-left:calc(-100% - 10px); margin-right:calc(-100% - 10px);}[class^="item"]:nth-child(3n + 3):hover { margin-left:calc(-200% - 20px);}
.container>div { border: 2px solid #0580d5; background-color: rgba(40, 180, 240, .3); border-radius: 5px;}
@media only screen and (min-width: 789px) { .container { grid-template-columns: repeat(3, 1fr); }}
<div class="container">  <div class="item-1">1</div>  <div class="item-2">2</div>  <div class="item-3">3</div>  <div class="item-4">4</div>  <div class="item-5">5</div>  <div class="item-6">6</div>  <div class="item-7">7</div>  <div class="item-8">8</div>  <div class="item-9">9</div></div>

CSS Grid - Set item width on hover

You can do this with the grid-column property. It takes two integers, the starting and ending tracks (e.g. 1/3). The hitch is, you can't expand the last column without some extra work, because it jumps to the next line, out of range of the initial hover zone:

EDIT: As per the comment below, I've updated the hover code to be: grid-column: span 2; This is the same as "start at your beginning track and span 2 columns." This is a bit cleaner, in that it allows you to set a single style rule for every column. I've also added a :not(.col4) to the rule to avoid the aforementioned issue of the column jumping to the next line. Of course, you need to give each column the same "col" class for this to work:

.container {  display:grid;  grid-template-columns:1fr 1fr 1fr 1fr;}
.col1 { padding:20px; background:red; color:white; text-align:center;}
.col2 { padding:20px; background:green; color:white; text-align:center;}
.col3 { padding:20px; background:blue; color:white; text-align:center;}
.col4 { padding:20px; background:gray; color:white; text-align:center;}
.col:not(.col4):hover{ grid-column: span 2;}
<div class="container">
<div class="col1 col"> Column 1 </div>
<div class="col2 col"> Column 2 </div>
<div class="col3 col"> Column 3 </div>
<div class="col4 col"> Column 4 </div>
</div>

Why my div in display grid expand to cover all is available area?

There seems to be an issue with Specificity.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

You essentially answered your own question. display: block; works because that is the default display for div's. You have div { display: grid;} which changes the default display: block; on all of your div's.

display: grid; will try to use all available space. Hence, why your buttons are stretched. I would either put the grid on only applicable div's. Or, you could use the :not pseudo-class like so:

div:not(.div-button-right, .div-button-left) {
display: grid;
border: dotted 1px #ff0;
}

This will exclude the div's defined in the :not pseudo-class of those styles.

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
border: dotted 1px #ff0;
}
body {
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
background-image: url(/../../media/index0.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size: cover;
}
.div-container {
display: grid;
border: solid 2px red;
height: 100vh;
width: 100vw;
}
.div-top-row {
border: solid 2px pink;
height: 65vh;
width: 100vw;
}
.div-bottom-row {
display: grid;
border: dotted 3px green;
height: 30vh;
width: 100vw;
grid-auto-flow: column;
}
.copyrights {
display: grid;
height: 5vh;
width: 100vw;
justify-items: center;
align-items: center;
font-size: 11px;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
}
.btn-gradient {
border: none;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
padding: 0.875rem 1rem;
text-decoration: none;
transition: all 0.15s;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
}
.btn-blank-blue {
background: 0 0;
border: 1px solid #1e92e6;
color: #1e92e6;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/../../css/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
<title>Home</title>
</head>
<body>
<div class="div-container">
<div class="div-top-row"></div>
<div class="div-bottom-row">
<div class="div-button-left">
<button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
</div>
<div class="div-button-right">
<button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
</div>
</div>
<div class="copyrights">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
</body>
</html>

Prevent grid items from expanding when content is added

You're setting the column and row sizes to auto. This means they will be sized based on their content. Instead, use fr units, which use the free space in the container.

#content {  display: grid;  grid-template-rows: 20px auto 20px;  grid-template-columns: 20px auto 20px;  height: 100vh;  background-color: #880022;}
#grid { grid-row-start: 2; grid-column-start: 2; display: grid; grid-template-rows: 1fr 1fr; /* adjustment */ grid-template-columns: 1fr 1fr; /* adjustment */ grid-gap: 2px;}
.tile { display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.2);}
.tile:hover { background-color: rgba(255, 255, 255, 0.3);}
.tile span { font-size: 2em;}
body { margin: 0;}
<div id="content">  <div id="grid">    <div class="tile"><span>test</span></div>    <div class="tile"></div>    <div class="tile"></div>    <div class="tile"></div>  </div></div>

Get corner items in current CSS grid layout, expanding on hover

I honestly tried to solve it using grid-template-columns: repeat(auto-fit, minmax(250px,auto)); and a different size of child elements, but in's too unstable and not working that way. But I don't think the grid is require for this task. The easiest way I see how this should be solved - using good old JavaScript (+jQuery) and flex. Although the right way will be resize all elements in a single row, not only nearest siblings of a hovered element. Try it on any screen size.

$(document).ready(function() {
/* defines main digits */
let boxWidth = $('#box').innerWidth();
let itemOuterWidth = $('.item').outerWidth(true);
let itemInnerWidth = $('.item').innerWidth();
SetSeparators(boxWidth, itemOuterWidth);

/* refresh main digits ater page resize */
$(window).resize(function() {
$('.item').css({
"flex": ""
});
boxWidth = $('#box').innerWidth();
itemOuterWidth = $('.item').outerWidth(true);
itemInnerWidth = $('.item').innerWidth();
SetSeparators(boxWidth, itemOuterWidth);
});

$('#box').on('mouseover', '.item', function(e) {
GetElementsPosition($(this).index('.item'), $(this), boxWidth, itemOuterWidth, itemInnerWidth);
});

$('#box').on('mouseleave', '.item', function(e) {
$('.item').css({
"flex": ""
});
});

});

/* set separator elemet to avoid blocks to jump from row to row while resizing */
function SetSeparators(boxWidth, itemOuterWidth) {
$('.separator').remove();
let countRowItems = Math.floor(boxWidth / itemOuterWidth);
$('<div class="separator"></div>').insertBefore('.item:nth-child(' + countRowItems + 'n+1)');
}

function GetElementsPosition(index, element, boxWidth, itemOuterWidth, itemInnerWidth) {

/* calculating row items, column position and row position of a current elemet */
let countRowItems = Math.floor(boxWidth / itemOuterWidth);
let colPosition = index % countRowItems;
let rowPosition = Math.floor(index / countRowItems);
/* exmanpd size of a hovered element in pixels*/
let expandSize = 50;

/* counting number of items in a hovered row */
let currentRowCounter = 0;
$('.item').each(function(e) {
let thisIndex = $(this).index('.item');
let thisRowPosition = Math.floor(thisIndex / countRowItems);
if (rowPosition == thisRowPosition) {
currentRowCounter++;
}
});

/* settting each element widht according to it's position in a list and row */
$('.item').each(function(e) {
$(this).css({
"flex": "0 1 " + itemInnerWidth + "px"
});
let thisIndex = $(this).index('.item');
let thisColPosition = thisIndex % countRowItems;
let thisRowPosition = Math.floor(thisIndex / countRowItems);
if ((rowPosition == thisRowPosition) && (colPosition == thisColPosition)) {
$(this).css({
"flex": "0 1 " + (itemInnerWidth + expandSize) + "px"
});
} else if (rowPosition == thisRowPosition) {
$(this).css({
"flex": "0 1 " + (itemInnerWidth - (expandSize / (currentRowCounter - 1))) + "px"
});
} else {
$(this).css({
"flex": ""
});
}
});

}
* {
box-sizing: border-box;
}

html {
height: 100%;
}

body {
min-height: 100%;
margin: 0;
padding: 0;
}

#box {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}

.item {
background: gray;
flex: 0 1 250px;
height: 50px;
transition: all .5s ease;
margin: 0 15px 15px 15px;
}

.separator {
flex: 0 1 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>

CSS Grid how to select row to add hover effect?

display: contents; to the rescue!

Kinda.

Depending on your browser support and/or accessibility requirements, we can achieve the effect you want, using the general structure you have, with the relatively new display: contents property.

Describing display: contents is somewhat difficult, so I'll point to this excellent CSS Tricks article.

To use it, we'll wrap each group of <span> elements in a row into a <div> with display: contents. This allows us to target the div:hover > span elements and apply a background color.

There were a few others small changes required to your styling, like making the <span> elements fill the available width. Here's a working example:

.parent {  display: grid;  box-sizing: border-box;  width: 100%;  border: 1px solid #dbeaf4;  grid-template-columns: repeat(4, minmax(15%, max-content));  padding: 5px 0;}
.parent span { padding: 5px; border-bottom: 1px solid #dbeaf4;}
.row { display: contents;}
.row:hover span { background-color: #dbeaf4; cursor: pointer;}
<div class="parent">  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>Knowledge process outsourcing land the plane yet to be inspired is to become creative, innovative and energized we want this</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>We need to socialize the comms with the wider stakeholder community</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div>  <div class="row">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>  </div></div>

Adding hover to a grid ( that look like table)

Remove the following code and the rows will highlight in grey:

.row > div:nth-child(1) {
background: red
}

.row > div:nth-child(2) {
background: yellow
}

.row > div:nth-child(3) {
background: blue
}

.row > div:nth-child(4) {
background: purple
}

Remove background:white; from

#td {
height: 150px;
background:white;
border: solid black 1px;
margin: 0px;
}


Related Topics



Leave a reply



Submit