備忘録
- webページを作っているとき、要素がいい感じに横並びになってくれない
- 「左右中央揃え」で検索しても結局よくわからない
こんな困ったときにGrid Layout 機能を利用する
CSS Grid Layoutとは
CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
引用元は こちら (CSS Grid Layout を極める！（基礎編）)
Example
具体例として、ボタンを横に3個並べたときの実行結果とコードを残しておく。
- 実行結果
- コード
htmlファイルを作成し、コードをコピペして確認してください
<!DOCTYPE html>
<html lang="ja">
<style>
#container {
margin-top: 200px;
margin-left: 200px;
display: grid;
grid-template-rows: 50px;
grid-template-columns: 200px 200px 200px;
}
#itemA, #itemB, #itemC{
text-align: center; /*ボタンを中央寄せ*/
}
#itemA{
grid-column: 1 / 2;
}
#itemB{
grid-column: 2 / 3;
}
#itemC{
grid-column: 3 / 4;
}
.btn-square {
display: inline-block;
height: 30px;
width: 70px;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
</style>
<body>
<div id="container"> <!-- コンテナ -->
<div id="itemA"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
<div id="itemB"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
<div id="itemC"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
</div>
</body>
</html>