web-dev-qa-db-ja.com

CSSグリッドを使用した境界線の折りたたみ

新しいCSSグリッドの仕様について頭を悩ませていますが、境界線で問題が発生しています。

CSSグリッドの境界線を折りたたむことは可能ですか、それとも溝のスタイルを設定する方法はありますか？

以下のスニペットでわかるように、10pxボーダースタック（20px合計）中間ブロック。

この問題はCSSグリッドに固有のものではないことを理解していますが、すべてのボックス間および外縁に均一な10pxの境界線を作成するための新しいソリューションが可能になることを望んでいます。

私の実際の使用例は、グリッドとReactコンポーネントの操作を練習するために作成しているカレンダーです。ここで発生している問題を確認できます。

CSS Grid Calendar。

毎月は異なるため、考慮すべきさまざまなエッジケースがあります。

.container {
  display: grid;
  grid-template-columns: 120px 120px;
  box-sizing: border-box;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  border: 10px solid palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

私はグリッドを愛していますが、Googleにとって非常に難しいと感じています！私の質問をどのように改善するかについてのいくつかの提案でさえ大歓迎です。国境崩壊は正しい用語ですか？内部グリッド線？

ありがとう！

htmlcsscss3css-grid
22
Tim Foley

グリッドギャップまたはボックスシャドウを使用できます。

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

または、行と列のテンプレート設定を組み合わせます。

.container {
  display: grid;
  grid-template-columns: 110px 110px;
  grid-template-rows:110px;
  box-sizing: border-box;
  
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 border:solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

ボックスが100pxに設定されている場合、120pxの列と行には両側の境界線が表示されることに注意してください。

fr値が列に使用される場合、ボックスに幅を設定しないでください（行も同じ制限に従います）

.container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 110px;
  /*whatever else */
  box-sizing: border-box;
}

.block {
  margin: 0 -10px 0 0;/* fixed width value missing */
  height: 100px;
  background-color: lightgrey;
  border: solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
</div>
22
G-Cyr

グリッド項目レベルではなく、グリッドコンテナレベルですべてのサイズと間隔を制御することを検討してください。アイテムに適用されている境界線とサイズを削除します。

_.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1 */ /* 2 */
  grid-auto-rows: 100px; /* 3 */
  grid-gap: 5px; /* 4 */
  padding: 5px;
  background-color: tomato;
}

.block {
  background-color: lightgrey;
}

/* for demo only */
.block:nth-child(-n + 2) {
  visibility: hidden;
}_
_<div class='container'>
  <div class='block'>0</div>
  <div class='block'>0</div>
  <div class='block'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
  <div class='block'>8</div>
  <div class='block'>9</div>
  <div class='block'>10</div>
  <div class='block'>11</div>
  <div class='block'>12</div>
  <div class='block'>13</div>
  <div class='block'>14</div>
  <div class='block'>15</div>
  <div class='block'>16</div>
  <div class='block'>17</div>
  <div class='block'>18</div>
  <div class='block'>19</div>
  <div class='block'>20</div>
  <div class='block'>21</div>
  <div class='block'>22</div>
  <div class='block'>23</div>
  <div class='block'>24</div>
  <div class='block'>25</div>
  <div class='block'>26</div>
  <div class='block'>27</div>
  <div class='block'>28</div>
  <div class='block'>29</div>
  <div class='block'>30</div>
  <div class='block'>31</div>  
</div>_

jsFiddleデモ

ノート：

  1. _auto-fit_：行に収まるだけの列を埋めます。オーバーフロー列は折り返されます。
  2. minmax()：各列の最小幅は120px、最大幅は利用可能な空きスペースです。 frユニットは、フレックスレイアウトの_flex-grow_プロパティに相当します。
  3. _grid-auto-rows_：自動作成された行（implicit行）は、高さが100pxです。
  4. _grid-gap_：5ピクセルの溝が周囲にあります。 _grid-column-gap_および_grid-row-gap_の省略形。
6
Michael_B

ギャップの境界線の色が現在の月に該当しない日のセルと同じである場合は、グリッドコンテナ全体をdivで囲み、background-color境界線にしたい色にし、paddingの1pxにgrid-gap of 1px。このアプローチを使用すると、ボックスシャドウを使用する複雑さなしに、均一に境界付けられたグリッドを実現できます。

1
eriklharper