Gridで作る縦横中央揃え

# Gridとは？

> **CSS Grid Layout**（グリッドレイアウト）は、**2次元レイアウト** を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。
> 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
> [CSS Grid Layout を極める！（基礎編） - Qiita](https://qiita.com/kura07/items/e633b35e33e43240d363)

ということで、レイアウトを操作するにはとても便利なGrid。

Edge, Chrome, Firefox, Safari, Operaなどの主要ブラウザはほとんど対応しています。
[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=grid)

# 目指すイメージ

![browser.png](https://qiita-image-store.s3.amazonaws.com/0/279132/e2facae4-a07f-d966-af45-c47be9c4d31b.png)
ほれ、ここにブラウザがあるじゃろ？

![elem.png](https://qiita-image-store.s3.amazonaws.com/0/279132/bc1def60-9e46-239e-57d1-74239308aa7c.png)
この要素を...

![append.png](https://qiita-image-store.s3.amazonaws.com/0/279132/a15870f9-6565-8c9a-3bfe-602d7b0f672c.png)
こう（HTMLに追加）して...

![center.png](https://qiita-image-store.s3.amazonaws.com/0/279132/9508f584-9234-f9bd-6f0c-cda0ccae1d05.png)
こう（中央揃え）じゃ！（雑

# 考え方
1. まず要素は`div`かなんかで`background`を指定すればOK。
2. その`div`の幅・高さは、コンテナを作って`max-content`とやれば、そのコンテナもその大きさになるはず。
3. 中央揃えにするには、ブラウザサイズから要素サイズを引いて2で割ったものが画像の青線部分になる。ざっとこのように。
![ev.png](https://qiita-image-store.s3.amazonaws.com/0/279132/b38323ed-610b-a477-be0b-3b05dbfb4871.png)

4. `ブラウザサイズ - 要素サイズ`は、要素サイズを指定すれば、余り`1fr`で取得可能。

# 作る
```html:index.html
<body>
    <div class="container">
        <p>Grid Centering Test.</p>
    </div>
</body>
```

```css:style.css
html{
    margin: 0px;
    padding: 0px;
}

body{
    width: 100vw;
    height: 100vh;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 1fr max-content 1fr;
    grid-template-areas:
        ". .... ."
        ". item ."
        ". .... .";
}
.container{
    background: #ddd;
    width: max-content;
    height: max-content;
    grid-area: item;
}
```

これで以下のようになりました。
![grid.jpg](https://qiita-image-store.s3.amazonaws.com/0/279132/ad9de99e-2d4f-f4bc-36b7-40b4383559e4.jpeg)

ちゃんと中央揃えされています。

# 検証
では、サイズが変わったらどうなるのか。
つまり、コンテナのサイズやテキストが変わっても、コンテナごと中央揃えされたままなのか。
検証していきます。

検証用に、以下のコードを追加しました。

```html:index.html
<!-- Check -->
<div class="fontsizeSlider">
    <input type="range" min="1" max="100">
    <textarea>Grid Centering Test.</textarea>
</div>
<script>
    document.querySelector('.fontsizeSlider input').addEventListener('input',function(){
        document.querySelector('.container p').style.fontSize = `${this.value}px`;
    });
    document.querySelector('.fontsizeSlider textarea').addEventListener('input',function(){
        document.querySelector('.container p').innerText = this.value;
    });
</script>
<!-- End -->
```

これは、スライダーでテキストのサイズ指定、テキストエリアでテキスト内容指定をして、変化するごとにリアルタイムでコンテナも変化するというものです。

では、検証しましょう。

![gridInspect.gif](https://qiita-image-store.s3.amazonaws.com/0/279132/edb21050-4c66-397b-94f0-8623448333ae.gif)

（目視する限りは）中央揃えになったままですね。
成功です。


この結果が信じられないというなら、ご自身でお試しください。（極論）
このコードはこちらで公開しております。
https://github.com/a01sa01to/grid-centering

# 追記(2020.07.05)
[1-Line Layouts](https://1linelayouts.glitch.me/) こちらのページを見て知ったのですが、
こんなに大量のコードを記述しなくても `display: grid` と `place-items: center` で中央揃えできるようです。
[Can I use...](https://caniuse.com/#search=place-items)によると、ほとんどのブラウザで対応しているようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279132/e2a7ab5c-68ce-6818-3188-be491655a3d6.png)