Gridの使い方(2次元レイアウトを制御)
最終更新日:

Gridを利用すると2次元レイアウトを制御できます。ここでは、Gridの「基本的な概念」「各プロパティの使い方」について解説します。各プロパティごとにCODEPENでサンプルソースを作っています。ソースを編集しながら動きを確認してみてください。

概念

Flexboxは、 1次元レイアウト(横方向) で回り込みなど制御していました。
対して、Gridは、 2次元レイアウト(横方向×縦方向) で制御できます。

Gridコンテナ という親要素が、複数の Gridアイテム を子要素として持ちます。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

上記のcontainerクラスに display: grid; と定義することで、Gridコンテナが定義されます。

2行×3列のGridコンテナを定義してみます。

Gridコンテナ

display: grid; が定義されたクラスがGridコンテナとなります。

fr (fractions: 分数)

Gridを分割する単位として fr が利用できます。

Gridアイテム

Gridコンテナの子要素がGridアイテムになります。

Gridライン

grid_line.png

セルを分割する 垂直方向の線水平方向の線 がGridラインになります。

最初のラインが1です。Gridアイテムを配置するとき、Gridラインの数字を利用します。
(e.g. 2から4の垂直線内のセルに配置)

Gridを定義

grid-template-columns|列を定義

下記のように、 Gridの列を定義できます。

.template-columns1 {
    grid-template-columns: 50px 50px 100px;  
}

.template-columns2 {
    width: 200px;
    grid-template-columns: 1fr 1fr 2fr;  
}

.template-columns3 {
    width: 200px;
    grid-template-columns: repeat(2, 1fr) 2fr;  
}

grid-template-rows|行を定義

Gridの行を定義できます。
指定方法は、 grid-template-columns と同様です。

gap|間隔を定義

Grid間の間隔を定義できます。

/* 行間隔40px  列間隔10px */
gap: 40px 10px;

補足

  • 古いブラウザでは、接頭辞( grid- )がつき、 grid-gap となります。
  • IE11ではサポートされていません。

Gridアイテムを配置

grid-column|列位置を指定

垂直方向の 開始Gridライン終了Gridライン を指定して、列位置の指定ができます。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/grid-column

grid-row|行位置を指定

水平方向の 開始Gridライン終了Gridライン を指定して、行位置の指定ができます。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/grid-row

両方指定した例

最後に、 grid-column grid-row の両方を指定した例を確認します。

もっと詳しく知りたい

より複雑なレイアウトなど実装したい場合、下記サイトを参考にすると良いです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

動作確認しながら理解したいなら下記サイトがおすすめです。
http://griddy.io/

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。