説明では 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-between-auto-fill-and-aut... （HTML）グリッドレイアウト 1 2 3 4 5 6 -------------------- (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"が効きません

解決済

質問者：boulevard5
質問日時：2020/08/11 15:27
回答数：1件

説明では
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 では、各トラックは最小幅以上で、常に右側に空白ができないように伸縮します。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2020/08/12 10:20

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>