Объединить границы разных ячеек с помощью CSS-Grid (поведение границы-коллапса) - PullRequest
Новая
       14

Объединить границы разных ячеек с помощью CSS-Grid (поведение границы-коллапса)

2 голосов
/ 21 марта 2019

Я нашел много похожих вопросов, таких как [this] ( Свертывание границ с помощью CSS Grid ), но я все еще не нашел решения своей проблемы.

Я бы хотел, чтобы поперечные линии следующего фрагмента были выровнены.Сказал иначе я хотел бы получить (б), а не (а) 

     |
   --'          |
      .--     --+--
      |         |

    (a)        (b)


.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;  
   border-bottom: 5px solid black;
   border-right: 5px solid black;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   border-top: 5px solid black;
   border-left: 5px solid black;
}
<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

Ответы [ 2 ]

3 голосов
/ 21 марта 2019

Вы можете рассмотреть box-shadow, чтобы приблизить его. Половина границы с ouset тенью, а другая половина с inset. 

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
   padding: 0 2px 2px 0;
   box-shadow:
    0px 2px black,
    2px 0px black,
    2px 2px black,
    -2px -2px black inset;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   padding: 2px 0 0 2px;
   box-shadow:
    0px -2px black,
    -2px 0px black,
    -2px -2px black,
    2px 2px black inset;
}
<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

А если структура сетки проста, как у вас, вы можете применить фон к основному контейнеру: 

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(#000,#000) center/100% 4px,
    linear-gradient(#000,#000) center/4px 100%;
  grid-gap:4px;
  background-repeat:no-repeat;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
}
<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

Это также выполнимо для сложной сетки, но вам нужно найти правильные значения: 

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  background:
    linear-gradient(#000,#000) 0 calc(100%/3)/50% 4px,
    linear-gradient(#000,#000) 100% calc(2*100%/3)/50% 4px,
    linear-gradient(#000,#000) center top/4px 100%;
  grid-gap:4px;
  background-repeat:no-repeat;
}
.grid > * {
  background:pink;
  min-height:50px;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
}
.x { 
   grid-column: 1; 
   grid-row: 2/4;  
}
.y { 
   grid-column: 2; 
   grid-row: 3/4;  
}
<div class="grid">
  <div class="tl"></div>
  <div class="br"></div>
  <div class="x"></div>
  <div class="y"></div>
</div>
1 голос
/ 21 марта 2019

Легким решением было бы использовать отрицательные поля на br - см. Демонстрацию ниже: 

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;  
   border-bottom: 5px solid black;
   border-right: 5px solid black;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   border-top: 5px solid black;
   border-left: 5px solid black;
   margin-left: -5px; /* added */
   margin-top: -5px; /* added */
}
<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>
...