More than 3 years have passed since last update.

グリッドレイアウトで<HR>が表示されない問題

Posted at 2020-06-10

どこ行った、水平線

グリッドレイアウトで、<hr>が表示されない!

↓コード(抜粋)

index.html

<body>
  <div>A</div>
  <div>B</div>
  <hr>
  <div>C</div>
  <div>D</div>
</body>

style.css

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
hr {
  grid-column: span 2;
}

...ん?

...んんん?

点!
何てこったい、幅指定だ。

style.css

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
hr {
  grid-column: span 2;
  width: 100%;
}

あっさり解決ですね。

全部、画質の粗いリモデが悪いんだ。(ただの難癖)

間違ってheightやgrid-template-rowsを指定すると、horizonのくせに、垂直線になるよ。

style.css

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 100px auto;
}
hr {
  grid-column: span 2;
}

以上。