Сделайте элементы CSS-Grid, кликабельные при сохранении структуры сетки ⇐ Html

[Anonymous]

.element-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
gap: 10px;
}
.element {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: red;
box-sizing: border-box;
display: flex;
align-items: center;
}
.element h3 {
font-size: 1.2em;
margin: 0;
text-transform: uppercase;
}
a {
text-decoration: none;
}< /code>



Element 1

Element 2

Element 3 with a very very long text that might span multiple rows

Element 4







Element 1




Element 2




Element 3 with a very very long text that might span multiple rows




Element 4







Element 1

Element 2

Element 3 with a very very long text that might span multiple rows

Element 4

< /code>
< /div>
< /div>
< /p>
Я использую дисплей сетки на моем веб -сайте со следующей структурой /CSS Полем В целом это работает точно так, как я хочу. Все элементы отображаются в сетке (два столбца). Если один элемент больше (скажем, 3 ряда текста), элемент рядом с ним также регулируется (даже если это всего лишь 2 ряда текста), чтобы избежать каких-либо пробелов и иметь хороший вид сетки и ощущение


Element 1

Element 2

Element 3 with a very very long text that might span multiple rows

Element 4


< /code>
.element-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
gap: 10px;
}
.element {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: red;
box-sizing: border-box;
display: flex;
align-items: center;
}
.element h3 {
font-size: 1.2em;
margin: 0;
text-transform: uppercase;
}
a {
text-decoration: none;
}
< /code>
However, when I add a link to the grid and make each element clickable, this auto-readjustment disappears. At that point, the larger box is 3 rows tall and the neighbor with 2 rows of text is 2 rows tall leading to whitespace in the grid. Here is the adjusted code. How can I make the boxes clickable while maintaining a proper grid?



Element 1




Element 2




Element 3 with a very very long text that might span multiple rows




Element 4



< /code>
As a workaround i linked the image and the text (using two separate tags) instead which avoids the whitespace issue, but then the empty part of the elements are not longer clickable which isn't super intuitive especially for elements that have very little text.
Thanks

Подробнее здесь: https://stackoverflow.com/questions/793 ... -structure