I am trying to have an icon with a specific class element positioned in the center in relation to the first row, while skipping a cell in the second row's first column.
Is there a way to skip that cell without explicitly specifying the grid-column position in a third class div? I cannot use grid-row: span 2 on the icon because then it will be positioned in the center of two rows.
Is there any possibility to skip a specific cell when declaring the grid-template?
div {
border: 1px solid red;
}
.grid {
display: inline-grid;
grid-template-columns: min-content 200px 200px;
grid-auto-rows: 50px;
}
.icon {
align-self: center;
}
.third {
grid-column: 2;
}<div class="grid">
<div class="icon">
Icon
</div>
<div>
First field
</div>
<div>
Second field
</div>
<div class="third">
Third field
</div>
<div>
Fourth field
</div>
</div>