I am using CSS grid to build a rather complex interface. I need to place a border at the end of a div between two columns. How do I do that?
The finished result has to look like this:
HTML
<div class="footer">
<div class="expandeble">
<div class="expID">
<label class="idLabel">XXXX</label>
</div>
</div>
</div>
SCSS
.footer {
display: flex;
width: 100vw;
height: available;
}
.expandeble {
display: grid;
height: 6.15vh;
grid-template-columns: ;
15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;
grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;
}
.expID {
grid-column-start: 3;
grid-row-start: 2;
}
The Border needs to have this configuration:
.placeBorder {
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
Use a pseudo-element.
In grid layout (like in flex layout), pseudo-elements on the container are considered items. Therefore, insert a pseudo that will simulate a border across your desired grid area.
.expandeble::after {
content: "";
border: 1px solid red;
height: 0;
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
.expandeble {
display: grid;
height: 6.15vh;
grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;
grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;
}
.expID {
grid-column-start: 3;
grid-row-start: 2;
}
/* new */
.expandeble::after {
content: "";
border: 1px solid red;
height: 0;
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
<div class="footer">
<div class="expandeble">
<div class="expID">
<label class="idLabel">XXXX</label>
</div>
</div>
</div>