Как заставить псевдоэлемент перекрывать пустые ячейки сетки? - PullRequest
Новая
       12

Как заставить псевдоэлемент перекрывать пустые ячейки сетки?

0 голосов
/ 17 мая 2019

У меня есть макет в стиле Powerpoint, который я пытаюсь адаптивно построить, используя display:grid. Я использую псевдоэлементы :before и :after для рисования соединительных линий между ячейками сетки. Это прекрасно работает, когда рядом находятся клетки. Тем не менее, иногда я хочу провести линию между двумя ячейками, которые могут быть рядом или двумя. В прилагаемом примере я хочу, чтобы зеленая линия охватывала весь путь от № 2 до № 7.

Возможно ли, чтобы соединительный псевдоэлемент перекрывал зазор таким образом, чтобы не требовалось жестко кодировать высоту? Я могу придумать другой класс (например, .double-height:after { height: <whatever the height of a cell plus margins is> }, но я бы хотел этого избежать, если это возможно. 

.grid {
  display: grid;
  grid-template-columns: 45% 10% 45%;
 }
 
.column-0 { grid-column-start: 1; grid-column-end: 2;}
.column-1 { grid-column-start: 3; grid-column-end: 4;}
.row-0 { grid-row-start: 1; grid-row-end: 2;}
.row-1 { grid-row-start: 2; grid-row-end: 3;}
.row-2 { grid-row-start: 3; grid-row-end: 4;}
.row-3 { grid-row-start: 4; grid-row-end: 5;}
.row-4 { grid-row-start: 5; grid-row-end: 6;}
.row-5 { grid-row-start: 6; grid-row-end: 7;}
.row-6 { grid-row-start: 7; grid-row-end: 8;}

.grid > * { 
  padding: 0.25em;
  border: 1px solid #eee;
  margin: 0 0 30px;
  position: relative;
}

.line-down:after {
  content: '';
  position:absolute; 
  top:calc(100% + 5px);
  height: 20px;
  left:50%; 
  width:4px; 
  margin-left:-2px; 
  background:pink; 
  border-radius:2px; 
}
.column-1.row-1:after { background: #00ff00; }
<div class="grid">
  <div class="column-1 row-0 line-down">1</div>
  <div class="column-1 row-1 line-down">2</div>
  <div class="column-0 row-1 line-down">3</div>
  <div class="column-0 row-2 line-down">4</div>
  <div class="column-0 row-3 line-down">5</div>
  <div class="column-0 row-4 line-down">6</div>
  <div class="column-1 row-5 line-down">7</div>
  <div class="column-0 row-5">8</div>
  <div class="column-1 row-6">9</div>
</div>

1 Ответ

2 голосов
/ 17 мая 2019

Я не уверен, что это то, к чему вы стремитесь, поскольку вы не совсем объяснили, насколько динамична ваша сетка, или не дали каких-либо других вариантов использования.Это решение может быть либо жестко запрограммированным, либо более динамичным, поэтому я думаю, что по крайней мере оно может привести вас в правильном направлении:

Вы можете быть умным в отношении свойства height, используя calc(), так какПока у вас есть какой-то способ узнать размер или разрыв строк (в вашем случае это будет 7 - 2 = 5. Таким образом, вы можете установить ::after высоту псевдоэлементов зеленой линии в соответствии со следующими данными: rowHeight * 2 * rowsGapобратите внимание на умножение на 2, потому что каждая строка удваивается с псевдоэлементом.Это может быть либо статичным с выбранной пропорцией, либо динамическим, если вы используете JS для определения rowHeight и rowsGap в вашем приложении / веб-сайте.

Вот фактический код CSS: 

.grid {
  display: grid;
  grid-template-columns: 45% 10% 45%;
 }

.column-0 { grid-column-start: 1; grid-column-end: 2;}
.column-1 { grid-column-start: 3; grid-column-end: 4;}
.row-0 { grid-row-start: 1; grid-row-end: 2;}
.row-1 { grid-row-start: 2; grid-row-end: 3;}
.row-2 { grid-row-start: 3; grid-row-end: 4;}
.row-3 { grid-row-start: 4; grid-row-end: 5;}
.row-4 { grid-row-start: 5; grid-row-end: 6;}
.row-5 { grid-row-start: 6; grid-row-end: 7;}
.row-6 { grid-row-start: 7; grid-row-end: 8;}

.grid > * { 
  padding: 0.25em;
  border: 1px solid #eee;
  margin: 0 0 30px;
  position: relative;
}

.line-down:after {
  content: '';
  position:absolute; 
  top:calc(100% + 5px);
  height: 20px;
  left:50%; 
  width:4px; 
  margin-left:-2px; 
  background:pink; 
  border-radius:2px; 
}
.column-1.row-1:after { 
  background: #00ff00;
  height: calc(20px * 10);
}

обратите внимание, что изменение происходит только по правилу .column-1.row-1:after: 

.column-1.row-1:after { 
  background: #00ff00;
  height: calc(20px * 10);
}

и вот рабочая скрипка js: https://jsfiddle.net/wa01vz92/2/

...