如何用CSS或SVG连接离子网格中的三个方块？

Question

I have an ion-grid of 1 row by 3 columns:

What I'd like to do is connect the green squares with a dashed line, like this (the line is hand drawed on the image):

I have thought to put a background image of a dashed line behind the grid, but this is what I get:

When the grid is vertically positioned, the line should be vertical, and the same with horizontal position (like in the first images).

Also, I have thought of a SVG dashed line drawed somehow between the squares (but I'm very new to SVG so I'm not very sure).

Could this be achived by using HTML, CSS or SVG? Can you think of anything different?

Edit: added code

Current HTML:

<div class="my-grid">
    <ion-grid fixed>
        <ion-row text-center>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
        </ion-row>
    </ion-grid>
</div>

Current CSS:

ion-col div {
    height: 100px;
    width: 100px;
    background-color: green;
}
ion-col {
    border-width: thin;
    border-color: blue;
    border-style: solid;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Edit: added Stackblitz example here .

Answer 1

By defining the grid areas for grind items, you can achieve overlapping items and thus add a dashed line. See my snippet below.

 ion-row { display: grid; } ion-col div { height: 100px; width: 100px; background-color: green; } ion-col { border-width: thin; border-color: blue; border-style: solid; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } @media (min-width: 577px) { ion-row { grid-template-columns: 33% 33% 33%; grid-template-rows: 150px; } ion-col { grid-row: 1; } ion-col:nth-child(1) { grid-column: 1; } ion-col:nth-child(2) { grid-column: 2; } ion-col:nth-child(3) { grid-column: 3; } .dash-container { grid-column: 1 / 4; grid-row: 1; height: 3px; align-self: center; display: flex; justify-content: center; } .dash.horizontal { width: 66%; border-top: 3px dashed #000; height: 10px; } } @media (max-width: 576px) { ion-row { grid-template-rows: 33% 33% 33%; grid-template-columns: 150px; height: 450px; } ion-col { grid-column: 1; } ion-col:nth-child(1) { grid-row: 1; } ion-col:nth-child(2) { grid-row: 2; } ion-col:nth-child(3) { grid-row: 3; } .dash-container { grid-row: 1 / 4; grid-column: 1; height: 100%; width: 3px; align-self: center; display: flex; justify-content: center; margin-left: 50%; margin-top: 33%; } .dash.horizontal { height: 66%; border-left: 3px dashed #000; width: 0; } } 

 <div class="my-grid"> <ion-grid fixed> <ion-row text-center> <ion-col col-12 col-sm> <div></div> </ion-col> <ion-col col-12 col-sm> <div></div> </ion-col> <ion-col col-12 col-sm> <div></div> </ion-col> <div class="dash-container"> <div class="dash horizontal"></div> </div> </ion-row> </ion-grid> </div> 

I have added a new element .dash-container which spans the whole grid and is self-centered. Within that element is another element which is only 66% in width/height (which is the distance between the center points of the outer boxes if each is 33% wide) and has a dashed border.

I combined both former snippets into one using media queries. Below 577px, the grid is vertical.