Skip to main content
Participant
May 3, 2021
Answered

CSS Grid Layout で、gap の値がhtml ライブに反映されません。

  • May 3, 2021
  • 1 reply
  • 957 views

Googleで見るとgapの値が正常に反映されますが、Dreamweaverのライブで反映されません。下記の赤文字が問題の箇所です。

原因を教えていただければ、大変助かります。

.container {
  display: grid;
  width: ●●●px;
  grid-template-columns: 2fr 3fr 1fr;
  grid-template-rows: ●●●px ●●●px ●●●px;
  margin: 0 auto;
  gap: ●●px ●●px;

}

This topic has been closed for replies.
Correct answer nmatsuo5

Dreamweaverのライブビューはあくまでも目安です。基本的にはブラウザで問題なければ無視しても構いません。

 

CSS Gridについては比較的新しいプロパティですので、使用には若干注意が必要です。
gap」は当初「grid-gap」と接頭辞付きでしたので、まだ実装していないブラウザが他にもあるかもしれません。移行期である今は、grid-gap で代用されることをお奨めします。

https://developer.mozilla.org/ja/docs/Web/CSS/gap

1 reply

nmatsuo5Correct answer
Inspiring
May 5, 2021

Dreamweaverのライブビューはあくまでも目安です。基本的にはブラウザで問題なければ無視しても構いません。

 

CSS Gridについては比較的新しいプロパティですので、使用には若干注意が必要です。
gap」は当初「grid-gap」と接頭辞付きでしたので、まだ実装していないブラウザが他にもあるかもしれません。移行期である今は、grid-gap で代用されることをお奨めします。

https://developer.mozilla.org/ja/docs/Web/CSS/gap

RIKO0807Author
Participant
May 5, 2021

ご回答ありがとうございます!

ブラウザ(Google Chrome)で確認したところ問題ありませんでした。

今後、ライブビューは目安程度にして、確認は必ずブラウザで行うように致します。

 

CSS Grid の仕様については注意が必要とのこと、参考URLをご教示頂きありがとうございます!

「grid-gap」を代用するなど、使用に留意するように致します。

大変ありがとうございました m(_ _)m