Border inside Grid Layout
One thing you can use the nth-child
selector in a better way like below instead of targeting one by one.
.child:nth-child(-n+3) {
border-bottom: var(--border);
}
.child:nth-child(3n+1) {
border-right: var(--border);
}
.child:nth-child(3n) {
border-left: var(--border);
}
.child:nth-child(n+7) {
border-top: var(--border);
}
:root {
--border: 2px dashed #393939;
--symbol-color: #FF7F5B;
}
.grid {
height: 100%;
display: grid;
grid-template-columns: repeat(3, calc(100%/3));
grid-template-rows: repeat(3, calc(100%/3));
}
.child {
display: flex;
align-items: center;
align-content: center;
color: var(--symbol-color);
font-size: 2.5rem;
}
.child:nth-child(-n+3) {
border-bottom: var(--border);
}
.child:nth-child(3n+1) {
border-right: var(--border);
}
.child:nth-child(3n) {
border-left: var(--border);
}
.child:nth-child(n+7) {
border-top: var(--border);
}
<div class="grid">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
Since you want a stylized border (dashed, in this case), then your approach and the approach taken in the other answers appears to be useful.
However, if you decide to use a simple, solid line border, then the approach can be simplified. Just use the background color of the grid for border color, and the grid-gap
property for border width.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
background-color: black;
grid-gap: 1px;
height: 100vh;
}
.child {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #FF7F5B;
font-size: 2.5rem;
}
body { margin: 0;}
<div class="grid">
<div class="child"></div>
<div class="child"></div>
<div class="child">X</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child">O</div>
<div class="child"></div>
</div>
You may consider this workaround.
You may use grid-template-columns to do the trick.
create a parent container that will hold your four images.
set a background color (desire color of the border).
set the padding to 0
then do the trick arrange the images by grid-template-column: auto
auto;then add gap to them grid-gap: 10px; (to show the background color of the container as grid).
please see code below for reference
.container {
width: 200px;
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: #000;
padding: 0;
}
.container > div {
background-color: #ccc;
padding: 20px;
text-align: center;
}
html
<div class="container">
<div>Image here</div>
<div>Image Here</div>
<div>Image here</div>
<div>Image here</div>
</div>
to help you visualize i create a sample code
http://plnkr.co/edit/gIeumXLt0k3FPVCgGlDd?p=preview
Hope it helps
Cheers!