How can I add horizontal and vertical borders to the cells in my 6-column by 3-row table in Webflow using Grid?
TL;DR
- Create a 6-column by 3-row grid using a Div Block set to Grid layout.
- Add 18 Div Blocks inside the grid and assign them a shared class like
Table Cell. - Apply a 1px solid border to all sides of the
Table Cellclass to create cell borders. - Optionally, use combo classes or custom CSS to remove right/bottom borders on the last column/row and add padding for spacing.
To add horizontal and vertical borders to each cell in a 6-column by 3-row Grid table in Webflow, you'll need to style the grid cells individually or use a common class for consistency.
1. Create the Grid Structure
- Add a Section to your page.
- Inside the section, add a Div Block and give it a class like
Grid Table. - Set the Display to Grid in the Style panel.
- Under the Grid layout settings, set 6 columns and 3 rows.
2. Insert Table Cells
- Inside the Grid Table, create 18 Div Blocks (6 columns × 3 rows = 18 cells).
- Give each div cell a common class, e.g.,
Table Cell.
3. Style the Cell Borders
- Select one of the
Table Cellelements. - In the Style panel, apply the following under Borders:
- Set a border width (e.g., 1px)
- Select solid as the border style.
- Choose a color (e.g., #cccccc).
- This border will apply to all four sides of every cell, creating vertical and horizontal lines between them.
4. Remove Inner-Doubled Borders (Optional)
- To prevent double thickness borders between cells, consider:
- Using only border-right and border-bottom for each cell.
- Removing border-right on the last column and border-bottom on the last row using combo classes or custom CSS.
5. Add Spacing and Sizing (Optional)
- Apply padding (e.g., 10px) inside each
Table Cellfor content spacing. - Set equal widths or auto-fit in Grid settings if necessary.
Summary
To add borders to your 6×3 grid table, give all cell elements a shared class and apply a uniform 1px solid border. This provides both horizontal and vertical cell borders, mimicking a traditional table layout. Use combo classes if you want to clean up doubled edges on the final column or row.
