Step 1 - Add a Grid
I know this might be hard to believe, but the very first step to add borders to a grid is... Adding a grid. Maybe even with some text block elements.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Step 2 - Add Gaps
The next step of our journey is setting column and row gaps equal to the width of the borders we want to create. I will go for a 1px border for both columns and rows.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Step 3 - Add a Background Color to the Grid
Let's give a background color to our grid. This will define the color of our borders. I'll Webflow purple this time.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Step 4 - Add a Background Color to the Text Elements
It's time to put an end to this game. Last thing we need to do is adding a bacground color to our text elements. The color must be the same as the one surrounding the grid. In this case, a shade of black.
But wait! What about responsiveness? Well, responsiveness is free here! Yeah! The only thing we need to do is choosing the amount of columns we want for each breakpoint.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
