CSS3

プロパティ

grid

→●、mdn

グリッド： 格子定義： 略式プロパティ。

grid プロパティは、各種［明示的な格子プロパティ、暗黙的な格子プロパティ］すべてを単独の宣言で一括して設定するための略式プロパティである（これは、側溝プロパティを設定し直すことはない）。その構文は、grid-template の構文に［自動フローによる格子を定義する、次の構文］を加えたものに合致する：

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

いずれも、一方の軸の筋たちは 明示的に設定する（grid-template-rows、grid-template-columns のうち一方は指定されたとおりに、他方は none に設定する）一方で、他方の軸の筋たちは 自動で繰り返す方法を指定する（grid-auto-rows、grid-auto-columns のうち一方を指定されたとおりに、他方は none に設定する）ことにより、自動フローを設定する。grid-auto-flow も、指定されたとおりに（row または column に、および dense が指定されていれば それも）設定する。

他のすべての下位プロパティは、それぞれの初期値に設定する。

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:50px 70px/auto-flow 50px 70px 90px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
 <DIV style="border:1px solid black;">5</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:50px 70px/auto-flow 50px 70px 90px;
">
 <DIV style="grid-area:1/2; border:1px solid black;">2</DIV>
 <DIV style="grid-area:2/2; border:1px solid black;">5</DIV>
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:50px 70px/auto-flow dense 50px 70px 90px;
">
 <DIV style="grid-area:1/2; border:1px solid black;">2</DIV>
 <DIV style="grid-area:2/2; border:1px solid black;">5</DIV>
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

denseの効果がわからず。

[auto-flow && dense?] <'grid-auto-rows'>? / <'grid-template-columns'>

上記を参照。

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:auto-flow 50px 70px/50px 70px 90px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
 <DIV style="border:1px solid black;">5</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:auto-flow 50px 70px/50px 70px 90px;
">
 <DIV style="grid-area:1/2; border:1px solid black;">2</DIV>
 <DIV style="grid-area:2/2; border:1px solid black;">5</DIV>
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15pt;
 display:grid;
 align-content:start;
 grid:auto-flow dense 50px 70px/50px 70px 90px;
">
 <DIV style="grid-area:1/2; border:1px solid black;">2</DIV>
 <DIV style="grid-area:2/2; border:1px solid black;">5</DIV>
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

denseの効果が不明

none

<DIV style="border:1px solid red; width:200px; height:200px; font-size:15px;
 display:grid;
 grid:none;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
 <DIV style="border:1px solid black">5</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:200px; font-size:15px;
 display:grid;
 grid:none;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="grid-row:1; border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
 <DIV style="border:1px solid black">5</DIV>
</DIV>

auto-flow

¶

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15px;
 display:grid;
 grid:50px 70px/auto-flow;
">
 <DIV style="border:1px solid #0008">1</DIV>
 <DIV style="border:1px solid #0008">2</DIV>
 <DIV style="border:1px solid #0008">3</DIV>
 <DIV style="border:1px solid #0008">4</DIV>
 <DIV style="border:1px solid #0008">5</DIV>
</DIV>

dense

指定された場合、自動配置アルゴリズムでは、“稠密な”収納法アルゴリズムが利用される： それは、後続の小さいアイテムにより、大きいアイテムで埋められなかった格子の“穴埋め”を試みる。そのため、アイテムは順番どおりに現れなくなり得る。

省略された場合、“疎な”アルゴリズムが利用される： 自動配置アルゴリズムは、格子の中にアイテムを置いていくときに“前に”しか進まず、決して、後戻りして穴埋めすることはない。これは、自動配置されるすべてのアイテムが ― 後続のアイテムで埋めれるような“穴”が残されていても ― “順番どおりに”現れるようにする。

<DIV style="border:1px solid red; width:250px; height:150px; font-size:15px;
 display:grid;
 grid:50px 70px/auto-flow dense;
">
 <DIV style="border:1px solid #0008">1</DIV>
 <DIV style="border:1px solid #0008">2</DIV>
 <DIV style="border:1px solid #0008">3</DIV>
 <DIV style="border:1px solid #0008">4</DIV>
 <DIV style="border:1px solid #0008">5</DIV>
</DIV>

やっぱりdenseの効果がわからない

注記： 単独の grid 宣言で指定できるのは、各種［明示的／暗黙的］な格子プロパティのうち、片方の軸に限られる。通常の略式プロパティのように、指定しなかった下位プロパティは、初期値に設定される。

grid-template: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;

grid-template: none;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-auto-columns: 1fr;

テスト