次世代CSSレイアウト仕様「Gird Layout Module」を使いこなすために知っておきたい、自動配置アルゴリズムのしくみを詳しく解説。 この記事では、要素を配置する際にCSS Grid Layout Moduleの自動配置アルゴリズムがたどるすべてのステップを説明します。ステップはgrid-auto-flowプロパティでコントロールされています。 『Flexboxよりも新しい!CSSレイアウトの最新仕様Grid Layout を先取りしよう』や『2017年に学びたい!次世代CSSレイアウト「Grid Layout Module」の使い方』で、CSS Grid仕様の概要とGridでWebに要素を配置できる多様な方法すべてを説明しました。とはいえ先の記事ではグリッド内の単一の要素の位置を明示的に指定しただけでした。ほかの複数のアイテムはアルゴリズムに基づいて適切に配置されます。 この記
![徹底検証!CSS Grid Layout moduleの自動配置アルゴリズムはどう働くか?](https://cdn-ak-scissors.b.st-hatena.com/image/square/c54bfb66772451a564a5bc6f941809b5ea25505f/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2445297%2Fl%2F8bc5534387aca657.jpg)