Я начал разработку веб-страницы с использованием CSS3 Grid и наткнулся на проблему, для которой не могу найти решение.
В основном у меня есть контейнерный элемент div, который я заполняю следующим образом:
#pages {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
grid-template-rows: repeat(auto-fit, minmax(300px, auto));
justify-items: stretch;
grid-gap: var(--gridgap);
grid-column: 1 / 1;
grid-row: 2;
color: black;
}
HTML выглядит примерно так:
<div id="pages">
<article class="pagecard">
<div class="cardheader">
<h1> Page1 </h1>
</div>
<div class="carddesc">
<p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
</div>
</article>
<article class="pagecard">
<div class="cardheader">
<h1> Page2 </h1>
</div>
<div class="carddesc">
<p> Description test</p>
</div>
</article>
<article class="pagecard">
<div class="cardheader">
<h1> Page3 </h1>
</div>
<div class="carddesc">
<p> Description test</p>
</div>
</article>
...
Обычно это приводит к 3 контейнерам на строку.То, что я хочу сделать, - это создать контейнер, охватывающий всю строку, когда он находится над ним.
Я попытался сделать это так:
.pagecard:hover{
grid-column: 1 / -1;
}
Этокажется, хорошо работает для элемента, который находится в столбце 1. Когда курсор мыши находится над ним, он будет охватывать весь ряд, и все другие элементы будут правильно перемещены к следующему.
Однако, когда я пытаюсь навести курсор наэлемент в строке 1 столбца 2, вместо того, чтобы располагаться в столбце 1 и затем растягиваться, толкая элемент влево на следующую строку, сам элемент переходит на следующую строку.Из-за этого эффекта он теряет зависание и начинает «прыгать» взад и вперед.
Это можно решить, используя только CSS и HTML?
В основном, при наведении курсора на элемент № 2 в виде сеткикак:
1 2 3
4 5 6
Это должно привести к
2 2 2
1 3 4
6
Надеюсь, кто-нибудь может указать мне правильное направление.
Заранее спасибо!
РЕДАКТИРОВАТЬ:
Я думаю, это будетможно решить с помощью javascript путем вычисления строки ячейки, а затем установки grid-row: currentRow дополнительно к grid-column.Однако мне интересно, есть ли решение только для CSS!