CSS Grid Layout のセル内の要素配置を理解する

CSS Grid Layout で、各々のセル内で、要素配置をどのように配置するかをまとめました。 Grid Layout の使い方として、縦に並べるのは、普通に div を使って、 横(grid-column)に Grid Layout を使うことが多いので、grid-column を例に使って説明していきます。

目次

デフォルトの設定

デフォルトの設定は、セル内での要素位置は左上になっています。 これから説明する、align-itemsjustify-itemsstart になっている状態です。

<div style="display: grid;">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

※注

見にくくなるため、サイズや色付けに関する CSS は記述を省略しています。 実際はこんな感じです:

<div style="display:grid; background-color: lightgrey; height: 100px;">
  <div style="grid-column: 1; color:blue; background-color:red; height:50px; width: 80px;"></div>
  <div style="grid-column: 2; color:red; background-color:blue; height:65px; width: 90px;"></div>
</div>

要素を縦方向で中央にする

縦方向の制御には、align-items を使います。 セル内の要素を縦方向で中央に配置するには、親要素で align-itemscenter に指定します。


 





<div style="display: grid;
            align-items: center;
           ">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

要素を横方向で中央にする

横方向の制御には、justify-items を使います。 セル内の要素を横方向で中央に配置するには、親要素で justify-itemscenter に指定します。


 





<div style="display: grid;
            justify-items: center;
           ">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

要素を縦横方向で中央にする

セル内の要素を縦方向、横方向で中央に配置するには、親要素で align-itemsjustify-itemscenter に指定します。


 
 





<div style="display: grid;
            align-items: center;
            justify-items: center;
           ">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

要素をひとつだけ操作するには?

今まで見てきた justify-items と align-items は、列の要素を一気に操作するものでしたが、 要素をひとつだけ操作したいときもあるかと思います。

その場合、justify-items と align-itemsitems の部分を self にして、親要素ではなく、各子要素で設定するだけで OK です。

以下の例では、ひとつめの要素を横方向で中央に (justify-self: center;)、二つ目の要素を縦方向で中央に (align-self: center;) 指定しています。



 


 



<div style="display: grid;">
  <div style="grid-column: 1;
              justify-self: center;
              "></div>
  <div style="grid-column: 2;
              align-self: center;
              "></div>
</div>

center 以外には何がある?

ここまで、center を使って説明してきましたが、もちろん他にもいろいろ指定することができます。 主要な物を align-items を変更して見ていきます。

start

start は こちらで説明したように、デフォルトの設定となっていて、 始点に配置されます。


 




<div style="display: grid; 
            align-items: start;">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

end

end は終点に配置されます。


 




<div style="display: grid; 
            align-items: end;">
  <div style="grid-column: 1;"></div>
  <div style="grid-column: 2;"></div>
</div>

他にどんなパラメータを指定できるかは、以下の Mozilla のドキュメントをご覧ください。

Playground

今回の内容の Playground を作ったので試してみてください。

  • align-items :
  • justify-items :
grid-template-columns に値を指定することでセルのサイズを変更することができます。以下の要素を変えるとひとつ目の要素のサイズを変更できます。
grid-template-columns:

対応するHTML:

<div style="display:grid; align-items: start; jusity-items: start; grid-template-columns: 200px 1fr;"> <div style="grid-column: 1;">1</div> <div style="grid-column: 2;">2</div> </div>


Last Updated: 3/7/2020, 2:01:38 PM