gridで分けたエリアを罫線で分けたい
正方形のdiv要素があります、正方形を5×5のgridで分けました(縦横5マスずつになりました)。
そして、正方形のdiv要素の中にはsvg画像が５個ずつ並んでいる状況です。
borderのやり方で試しましたがsvgの周りにしかできずsvg画像を囲う形になってしまいます。
svgの周りを囲う形ではなくdiv要素の正方形を縦横5マスずつ見やすくするための線を表示させたいです。
どなたでもいいのでご教示ください。
お聞きしたいことがあれば言ってください。
chatGPTで色々(擬似要素を使ったりなど)試してみましたが上手くいきませんでした。
適当にdivでラップすりゃいい話です.
普通にこの辺のでお望みの罫線になりませんか？
あまり筋はよくないですが、border-collapse的なことをお求めでしたら、背景色で代用するという手もあります。
See the Pen https://qiita.com/touzenn/questions/e0e4de3b670b356dd448 by lhankor_mhy (@lhankor_mhy) on CodePen.
あとはまあ、他の方の回答のようにラップしてgapとoutlineで書くとか。
一応、outlineで書いたものも置いておきます。
See the Pen https://qiita.com/touzenn/questions/e0e4de3b670b356dd448 by lhankor_mhy (@lhankor_mhy) on CodePen.
divの中に５＊５のtableを作ったらどうですか。tableのtdに枠線を付けられます。tdの中にsvg画像を入れます。
This answer has been deleted for violation of our Terms of Service.
grid の セルは 同じ grid-row / grid-column の指定が可能な為、重ねることができますのでその方法で 全てのセルに div 配置して border の指定でいいのではないでしょうか……？border を重ねたい場合はそれぞれの div に margin: calc(-1 * var(--border-width)); する必要は出てきそうですけれど。
@talhaafzaal123456
あー。背景画像として パターンを導入する手か。確かに。
だが、私の回答じゃなくて、直接回答で書いた方がよかったのでは………？
なお、そのアイディアはよいですが、その background の指定だと セルにしては細かすぎる枠線になります。動かないです。
やるならこんな感じでは……
.grid-container {
/* #region 変数 */
/** セルサイズ */
--cell-size: 50px;
/** セル数 */
--cell-count: 5;
/** border の幅 */
--border-width: 2px;
/** border の色 */
--border-color: black;
/** --border-width の半分幅 (計算値) */
--border-width-half: calc(var(--border-width) / 2);
/* #endregion */
display: grid;
grid-template-columns: repeat(var(--cell-count), 1fr);
grid-template-rows: repeat(var(--cell-count), 1fr);
width: calc(var(--cell-count) * var(--cell-size));
height: calc(var(--cell-count) * var(--cell-size));
position: relative;
border: var(--border-width-half) var(--border-color) solid;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
var(--border-color),
var(--border-color) var(--border-width-half),
transparent var(--border-width-half),
transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color)
calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color) calc(100% / var(--cell-count))
),
repeating-linear-gradient(
to right,
var(--border-color),
var(--border-color) var(--border-width-half),
transparent var(--border-width-half),
transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color)
calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color) calc(100% / var(--cell-count))
);
pointer-events: none;
}
}
repeating-linear-gradient() を使って こんな感じでよさそう
See the Pen Untitled by juner clarinet (@juner) on CodePen.
.grid-container {
/* #region 変数 */
/** セルサイズ */
--cell-size: 50px;
/** セル数 */
--cell-count: 5;
/** border の幅 */
--border-width: 2px;
/** border の色 */
--border-color: black;
/** --border-width の半分幅 (計算値) */
--border-width-half: calc(var(--border-width) / 2);
/* #endregion */
display: grid;
grid-template-columns: repeat(var(--cell-count), 1fr);
grid-template-rows: repeat(var(--cell-count), 1fr);
width: calc(var(--cell-count) * var(--cell-size));
height: calc(var(--cell-count) * var(--cell-size));
position: relative;
border: var(--border-width-half) var(--border-color) solid;
}
.grid-container::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
var(--border-color),
var(--border-color) var(--border-width-half),
transparent var(--border-width-half),
transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color)
calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color) calc(100% / var(--cell-count))
),
repeating-linear-gradient(
to right,
var(--border-color),
var(--border-color) var(--border-width-half),
transparent var(--border-width-half),
transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color)
calc((100% / var(--cell-count)) - var(--border-width-half)),
var(--border-color) calc(100% / var(--cell-count))
);
pointer-events: none;
}