プロが教えるわが家の防犯対策術!

説明では
grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
のように記述するといくら画面を横方向に伸ばしても隙間なく埋められるようなのですが、
添付画像のようにある程度伸びると止まってしまいスペースができてしまいます。
chromeとedgeの両方を試しても同様です。


自分では以下のURLの画像のようにどこまで横方向に拡大しても隙間なくボックスができると思っていました。
http://up-img.net/img.php?mode=jpg&id=7477
記述が間違っているのでしょうか? auto-fitについての考え方が間違っているのでしょうか?





auto-fitを使うと、親要素で余ったスペースは崩されて幅が0pxとみなされます。そのため1frの幅を持つグリッドアイテムで余ったスペースが埋められるんですね。
https://www.webprofessional.jp/difference-betwee …


(HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グリッドレイアウト</title>
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>

--------------------

(CSS)
@charset "UTF-8";


body{
margin:0;
}
.container{
display:grid;

grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows:100px 100px;
}

.box1{
background:hsl(0, 60%, 60%);
}
.box2{
background:hsl(60, 60%, 60%);
}
.box3{
background:hsl(120, 60%, 60%);
}
.box4{
background:hsl(180, 60%, 60%);
}
.box5{
background:hsl(240, 60%, 60%);
}
.box6{
background:hsl(300, 60%, 60%);
}

補足
repeat(auto-fit | auto-fill, minmax())

https://web.hazu.jp/grid-layout-02/
auto-fit では、各トラックは最小幅以上で、常に右側に空白ができないように伸縮します。

---
とありますが添付画像のように右側に余白ができてしまってる状態です。

「グリッドレイアウトで"auto-fit"」の質問画像

A 回答 (1件)

boulevard5さん


 ・・・・・スペースができてしまいます・・・・・・・・・・・・・・

??? 確認できませんが。

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グリッドレイアウト</title>
<style>
body{
margin:0;
}
.container{
display:grid;

grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows:100px 100px;
}

.box1{
background:hsl(0, 60%, 60%);
}
.box2{
background:hsl(60, 60%, 60%);
}
.box3{
background:hsl(120, 60%, 60%);
}
.box4{
background:hsl(180, 60%, 60%);
}
.box5{
background:hsl(240, 60%, 60%);
}
.box6{
background:hsl(300, 60%, 60%);
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

本日何度が試したらすべてうまく行きました。
うまく保存が出来ていなかったのか、リロードがうまく行っていなかったのか……。
お手数をおかけしました。回答ありがとうございますm(_ _)m

お礼日時:2020/08/12 13:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング