Grid Container

これは,ガイドバンド,ピグマなどから呼ばれるグリッドシステムとは少し異なる.
今後,グリッドシステムの位置決めを行い,まず関連する機能説明を付加する.
Sass+グリッドシステムの利用

container

グリッドのコンテナについて説明しましょう.
コンテナはその名の通りグリッドを入れたバケツです.HTMLのいずれかの要素はグリッドであってもよいが、display:grid;設定する

grid-teplate-columns

display: grid;
grid-template-columns: auto auto auto auto;

上に4つのautoがあるのは4つの欄です.columnが3つある場合はautoを3つ使うだけです.そして、同じサイズのカラムにautoを設定すればいいです.

これとは異なり、特定のサイズをあげたい場合は、以下のようにあげられます.

display: grid;
grid-template-columns: 80px 200px auto 30px;

3番目のautoだけが反応的に大きくなり、残りは固定的な形態を保つ.

grid-teplate-rows

grid-teplate-rowsもあります.

display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;

上記の例では、rowのサイズは変わらず、columnを構成する各グリッド項目の幅が変化します.

justify-content

space-均一なのは、水平に見ると、各グリッド項目が持つ領域が均一であることです.

display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px;

space−broundは、物品間の空間、すなわちcolumnとcolumn間の空間を一定に保つ.

justify-content: space-around;

上の1の左空間または3の右空間は、いずれにしても物品間の空間を一定に保つ.
このほかにspace-binter、center、start、endなどがありますが、これはよく知られているflex-box属性と同じなので、ここでは議論しません.

align-content

コンテンツが水平方向の場合、align-contentは垂直方向です.
行間距離を一定に保つ.

display: grid;
height: 400px;
align-content: space-evenly;
grid-template-columns: auto auto auto;

display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;

整理するとalign-contentはこの行間の間隔をそれぞれ指定する方法であり、previty-contentは列間の間隔を指定する方法である.また、行と列の幅はautoとしてもよいし、固定値としてもよい.