I made this mockup in photoshop. I’ve tried searching for answers, asked ChatGPT and Perplexity, but can’t determine the best way to create the borders for this grid.
How would you do it? Any tips? Thanks!
In case anyone comes here with this question in the future, this is how I solved it (with lots of help from the Claude Opus model on Perplexity).
The grid is 1000px wide. Figure out the size of the border. Calculate it to determine the size of each element. In my case, I wanted squares with a border approximately 25px. After calculating, the grid columns and rows would be 138px tall and wide, the inner gap or border would be 24px and the outer would be 26px to add to a total of 1000px wide.
To create the border, I set the gap to be 24px in the grid. I set the background to be the shade of black I wanted. However, because the border is asymmetrical, I had to do a few more things.
Rather than set a margin, padding, or border around the entire grid, I added the 26px spacing for each grid element on the outside of the grid so that I can control the outer borders per row and column. My grid template column: 164px repeat(4, 138px) 164px. My Grid template row: 164px 138px 164px
Then I just go to each block, under style, and create either a top, bottom, left or right border depending on its position.
For the asymmetrical aspects, I had to create some custom CSS. For instance, the very first block in my example on the top left. To give the appearance of it not having a border on its left side, I created a 26px left border and simply colored it the background to make it appear like the border isn’t there. However, as far as I can tell, Bricks doesn’t give the option to set different border colors by position, so I would have to write some CSS to create a separate top border color. I also want the top border to extend off the screen. This is what I wrote:
%root% {
position: relative;
border-left: 26px solid #efe7df;
}
%root%:after {
content: “”;
position: absolute;
top: 0;
left: -9999px;
right: 0;
border-top: 26px solid #101820;
z-index: 1;
}
Now, everything looks like I want it to. Then, just apply the same ideas to the rest of the grid and elements.