Preventing double borders in CSS Grid

html

responsive-design

css-grid

grid-layout

byNikita Barsukov·Mar 2, 2025

To obliterate double borders in a CSS Grid, allot borders to just one side of grid items. Also, get creative with the :not() pseudo-class and :last-child selector to fabricate flawless edges. Consider this chunk of code:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* repeat after me, columns are my friend(3x times) */
}

.grid-item {
  background: white;
  border-right: 1px solid black; /* just a teeny-tiny border on the right */
  border-bottom: 1px solid black; /* and another one on the bottom, nothing major */
}

.grid-item:nth-child(3n) { /* every 3rd item gets a special treatment, it's exclusive */
  border-right: none; /* guess what, no right border for you! */
}

/* Optional if you have fixed rows */
.grid-item:nth-last-child(-n+3) { /* adjusting '+3' to your number of columns */
  border-bottom: none; /* it's so last season */
}

Side-note: Applying borders to the right and bottom sides, then strategically yanking the right border from every third item (3n for 3 columns) is just genius! Now, should your rows be fixed, go ahead and remove the bottom border on the last row. Walla, you've got sharp, clean edges, with no unsightly double-up.

Mastering the art of the CSS Grid

Let's put HTML tables in a time capsule and move towards the future – CSS grid layouts. We tackle this common issue – managing grid borders to evade pesky duplicate lines cleverly.

Harness the power of grid-gap

Leap over the usual hurdle of using actual borders to separate grid items. Grow wise by setting grid-gap to control the spacing – an illusion of borders magically appears, while the layout stays fresh and clean.

The surprise element – margins and outlines

Defy tradition. Invoke margin: 0 -1px -1px 0; to subtly tweak the positioning. Watch in awe as adjacent cells camouflage their borders, successfully averting a double border spectacle. Alternatively, let outline shine the spotlight on a single, crisp line outlining each item.

Embracing box-sizing

Elevate the grid with the power of box-sizing: content-box;. Dictate how the grid dimensions are computed, keeping padding and borders from interfering with the size. Your precious grid lines stay in place, like well-behaved soldiers.

Interactivity and responsiveness for a dynamic grid

Employ repeat(auto-fill, minmax(100px, 1fr)) to create a grid that caters to content and viewport size. This forms columns tailored to fit the content while respecting the specified minimum and maximum size levels, ensuring a responsive design.

Amp up with hover states

Liven up the user experience with interactive elements. Utilize :hover states for enhanced visual feedback as users explore your grid. A dash of color change, border, or shadow during hover can transform your static grid into a dynamic landscape.

Precise item positioning

To gain substantial control over content within each grid cell, utilize position: relative;. This paves the path to regulate content placement within grid areas meticulously. Don't forget to assign a .grid-item class for individual styling, while making sure items have the appropriate HTML markup to display correctly.

Don't forget the good ol' fallbacks

While we tout the power of CSS Grid, do remember HTML tables for collapsed borders or simpler layout requirements. In scenarios where complex designs appear daunting with CSS Grid, returning to basics can often be the knight in shining armour.

explain-codes / Html / Preventing double borders in CSS Grid

Linked

Fluid width with equally spaced DIVs



Border around tr element doesn't show?



How to display an unordered list in two columns?



Setting table row height



How to center elements on the last row in CSS Grid?

