CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。
display:gridの利点
floatやflexの場合、レイアウトしたい要素を囲むラッパー的な余計な要素が必要になってしまいがちですが、display:gridを使う事で余計な要素を作らずにレイアウトが出来ます。
まずはコンテナに
.container { display: grid; }
次にアイテム間の縦横の隙間を指定します。
.container { display: grid; grid-column-gap: 10px;/*横の隙間*/ grid-row-gap: 10px;/*縦の隙間*/ /*grid-gap:10px;横縦同じであれば省略可*/ }
「grid-template-columns」を使ってアイテムの横幅を指定します。
.container { display: grid; grid-column-gap: 10px;/*横の隙間*/ grid-row-gap: 10px;/*縦の隙間*/ /*grid-gap:10px;横縦同じであれば省略可*/ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
- repeat() … repeat()関数で繰り返しパターンを指定出来ます。
- 「auto-fit」と「auto-fill」の違い
auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます
- minmax()
minmax()ではグリッドアイテムの最小幅と最大幅を指定しています。この記述だと最小幅が200px、最大幅が1fr(可変のフラクション)です。
fr
frとは「display: grid;」が指定された要素に対して有効な単位で、要素内の可用領域のうち占める割合を表す。Flexboxのflex-growと同じような振る舞いをすると理解してもらえれば良いでしょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>css-gridその2</title> <meta name="viewport" content="width=device-width"> <style> html,body,p { margin: 0; padding: 0; } .container { max-width: 1366px; margin: 0 auto; padding: 20px; box-sizing: border-box; display: grid; grid-column-gap: 10px;/*横の隙間*/ grid-row-gap: 10px;/*縦の隙間*/ /*grid-gap:10px;横縦同じであれば省略可*/ grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); } .item { border-radius: 10px; background:#7FD4D6; padding: 15px; text-align: center; } .item img { max-width: 100%; height: auto; margin-bottom: 20px; } p { text-align: left; } </style> </head> <body> <div class="container"> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> <div class="item"> <img src="http://placehold.it/240x150" alt=""> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!--/.item--> </div> </body> </html>