CSS9 grid frame merge

<ul>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
    <li>//</li>
</ul>

sCss
ul{
width: 1200px;
display:flex;
 box-sizing: border-box;

li{
 width: calc(100% / 6);
 border: 1px solid red;
}
}

the border that appears in the above code causes some of the borders in the middle to be 2px;

so add

to li.

 margin: 0 0 -1px -1px;

but the addition of this codeword results in 6px on the right side of each line;

is there any good way?

one of my own solutions is not very friendly

&:nth-child(6n) {
   width: calc(100% /6 + 6px);
}

Css css3 html html5 vue.js

Jan.16,2022

to achieve the effect of border merging, it is easiest to use a table

you can merge adjacent borders

table{
  border-collapse:collapse;
}

other ways can be spliced,

for example, each square inside sets only the left border and the top border, and then the outermost border sets the right border and the bottom border.

you can remove the left or right border from the middle. For example,

li:not(:last-child){
  border-right: 0;
}

it's easy to use the table, and it's cumbersome to write native

Previous: Npm failed to install create-react-app

Next: How to obtain repolist from Ali Cloud container image through sdk