Граница после каждой строки в CSS Grid - PullRequest
Новая
       7

Граница после каждой строки в CSS Grid

0 голосов
/ 09 июня 2018

Я пытаюсь сделать border-bottom после каждой строки, используя сетку CSS с содержимым, выровненным по центру.Я не могу обойти это.

Я хочу, чтобы .line заполнил всю ширину .wrapper контейнера.
Как мне этого добиться?

Воткод: 

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, auto) max-content;
  justify-content: center;
}

.wrapper>div:not(.line) {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.line {
  grid-column-start: 1;
  grid-column-end: 6;
  height: 2px;
  border-bottom: 1px solid black;
  width: 100%;
}
<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <div class="line"></div>
    <div>4444</div>
    <div>555555555</div>
    <div>99999999999</div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

У меня был некоторый успех с использованием nth-of-type и переключением строки на другой тип (<span>).

Я также добавил первый и шестой столбец для строки вspan,
, тогда как остальные элементы занимают только столбец 2-5. 

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  justify-content: center;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper>div:nth-of-type(3n+1) {
  grid-column: 2;
}

.line {
  grid-column: 1/6;
  height: 2px;
  border-bottom: 1px solid black;
}
<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <span class="line"></span>
    <div>4444</div>
    <div>555555555</div>
    <div>6666666</div>
    <span class="line"></span>
    <div>77777</div>
    <div>888888888</div>
    <div>99</div>
  </div>
</div>
0 голосов
/ 09 июня 2018

Вместо justify-content для центрирования контента вы можете добавить дополнительные столбцы до и после контента, как с 1fr.

Затем поместите первые div и div после .line на начало во втором столбце.

Скрипка 

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
}

.wrapper>div:not(.line) {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper > div:first-of-type,
.line + div {
  grid-column: 2;
}

.line {
  grid-column: 1 / -1;
  height: 1px;
  background: black;
}
<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <div class="line"></div>
    <div>4444</div>
    <div>555555555</div>
    <div>99999999999</div>
  </div>
</div>
...