All geek questions in one place

CSS Double Border Prevention

Given the current CSS grid example, how can I collapse borders to avoid double borders?

This is such a simple thing that is achieved using an Html table. How to do this using display: grid ?

 .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; } .wrapper > div { padding: 15px; text-align: center; border: 1px solid black; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
+17
source share
8 answers

You can do this:

 .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; border-bottom: 1px solid black; border-left: 1px solid black; } .wrapper > div { padding: 15px; text-align: center; border-top: 1px solid black; border-right: 1px solid black; } body { background:pink; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>

Another idea is to use a gradient to fill in the spaces, as shown below:

 .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; grid-gap:1px; background: linear-gradient(#000,#000) center/100% 1px no-repeat, repeating-linear-gradient(to right, transparent ,transparent 50px, #000 50px,#000 51px); border:1px solid; } .wrapper > div { padding: 15px; text-align: center; } body { background:pink; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>

You can also customize the original solution to make it more flexible, and it will work with any number of elements in a row.

Run the code below on the full page and resize the window:

 .wrapper { display: grid; max-width:800px; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); border-top: 1px solid black; border-left: 1px solid black; } .wrapper > div { padding: 15px; text-align: center; border-bottom: 1px solid black; border-right: 1px solid black; } body { background:pink; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div>

+12
source

Instead of using the actual border around the mesh elements, use the background color in the container (for the border color) and the grid-gap property (for the width of the border).

 .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; border: 1px solid black; grid-gap: 1px; background-color: black; } .wrapper > div { background-color: white; padding: 15px; text-align: center; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
+26
source 

 .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; } .wrapper > div { padding: 15px; text-align: center; border: 1px solid black; margin:0 -1px -1px 0; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> 
 margin:0 -1px -1px 0;

That should do the trick.

+8
source

I found a solution using the outline property.

 .grid { width: 100%; height: 700px; display: grid; grid-template-columns: repeat(4, 25fr); grid-template-rows: repeat(4, 25fr); margin-bottom: 30px; grid-gap: 1px; } .grid-item { background-color: silver; outline: 1px solid gray; /* The outline creates the border */ text-align: center; position: relative; z-index: 1; /* original z-index */ } /* If you want to change the color on the hover state */ .grid-item:hover { outline: 1px solid red; z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */ } 
 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div>
+6
source

Something that I used with success was simply adding a block shadow to the grid elements along with a space in the columns and rows. This then allows the size of the columns to always be exactly as defined in grid-template-columns . Then, simply changing the gap between the column and the row, as well as the size of the block shadow, allows you to get a thicker border.

 .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-column-gap: 1px; grid-row-gap: 1px; } .wrapper > div { padding: 15px; text-align: center; box-shadow: 0 0 0 1px; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
+1
source

Win-win code will be installed

  • mesh elements: bottom border and border to the right
  • wrapping grid: border on top and border on left

So this will be fixed even if the upper columns are not equal to the lower columns

 .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; border-top: 1px solid black; border-left: 1px solid black; } .wrapper > div { padding: 15px; text-align: center; border-bottom: 1px solid black; border-right: 1px solid black; } <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div>
+1
source

Is there an easy way to do this:

 .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; } .grid__item { border: 1px solid gray; box-sizing: content-box; width: 100%; height: 100%; } 
 <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> <div class="grid__item">4</div> <div class="grid__item">5</div> <div class="grid__item">6</div> <div class="grid__item">7</div> <div class="grid__item">8</div> <div class="grid__item">9</div> <div class="grid__item">10</div> <div class="grid__item">11</div> <div class="grid__item">12</div> </div>

Postscript The main trick here is in box-sizing: content-box . You do not need this unless you redefine globally with a different value. But many people use border-box , in this case this override solves the gap problem.

+1
source

You can use grid-gap for this

 .wrapper { display: inline-grid; grid-template-columns: 50px 50px 50px 50px; grid-gap: 1px; background-color: #000; border: 1px solid #000; } .wrapper > div { padding: 15px; text-align: center; background-color: #fff; } 
 <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
-2
source

Source: https://habr.com/ru/post/1274182/

More articles: