Flexboxレイアウトのグリッドレイアウトへの変換

このポストでは、アプリケーションのレイアウトをCSSFlexbox CSSを使うGrid . いつものように、私の例はWordSearch game 私はそれを実験している(神はそれを打つことができる知っている.).
だから我々は3つの主要部分に分かれているこのゲームボードです:

マスヘッド

ゲームボディ

言葉パネル

板

フッター

マークアップは次のようになります.

<div className="App">
    <Masthead />
    <div className="game-body">
        <WordsPanel />
        <Board />
    </div>
    ...
</div>

そして、これはFlexboxがどのように統合されたかです
アプリケーションのルートであるアプリケーションは、フレックスディスプレイで、列の方向を使用するように設定されました.Mastheadは単純なflexboxです、そして、これが1次元レイアウトでよく目的を果たすので、それはそのように残るべきです.
私たちは2つのセクションで構成されているゲームのボディがあります.ゲーム本体は、水平方向にフレックスボックス自体です.
底にはフッタボックスがあり、それはよく機能し、変更すべきではない.
以下のイメージを参照してください.

今、これはすべてうまく動作しますが、それはあまりにも多くのflexboxを持っている、どのようにマークが配置されている方法の周りに頭をラップするのは難しい、正直なので、それは本当にグリッドディスプレイのために呼び出すので、そのように変換を開始しましょう.
これが現在のスタイルです.APPクラス

.App {
   display: flex;
   flex-direction: column;
   height: 100%;
}

グリッド表示に変更します.

.App {
   display: grid;
   width: 100vw;
   height: 100vh;
}

私は、このルートグリッドがビューポートの幅と高さの全体を取るようにしたいので、100 Vwと100 Vhを使用しています.
それはうまく機能しているように思えたが、私はゲームボードの所望の位置のいくつかを失い、フッターはそれより高い高さをとる.

の概念grid-template-areas このケースには非常に適しているようです.異なる部分/領域がどのように配置されるかをすぐに見ることができるので、それらはすべて理解し、維持することが容易になります.
私は上記の異なる部分を取り、グリッド領域のIDを与えたいので、後でトップレベルのグリッドCSSルールでレイアウトを操作できます.
CSSクラスは、グリッド領域のIDが追加されただけで、古いCSS規則がまだ残っています.

.game-body {
   grid-area: gamebody;
   display: flex;
   height: 100%;
}

.words-panel {
   grid-area: wordspanel;
   width: 230px;
   list-style: none;
}

.board {
   grid-area: board;
   position: relative;
   flex: 1 1 100%;
   margin: 16px;
}

.footer {
   grid-area: footer;
   display: flex;
   justify-content: flex-start;
   padding: 6px;
   background-color: darkslategrey;
   color: white;
}

しかし、これらのクラスがグリッドエリアルールを持っているので、グリッドはそれらをレイアウトしようとします.

心配しないでください.
私はグリッドエリアの方法を使用して別のセクションを配置を開始するつもりです.
私は最初にグリッドテンプレート行を設定するので、グリッドは2行に分割されます.利用可能なスペースの一部を取得します.

.App {
   ...
   grid-template-rows: 60px 1fr;
}

コラムのために、私は2つのコラムを持ちます.最初の1つの単語パネル(230 pxに設定)を保持し、2番目のグリッドの残りの部分を取るゲームボードを保持します.グリッド定義にも置きましょう.

.App {
   ...
   grid-template-columns: 230px 1fr;
}

現在、我々は我々が得た異なる地域を準備し始めることができます.それについての良いことは、非常に視覚的な方法で、いくぶん宣言的な方法でそれを手配することです.

.App {
   ...
   grid-template-areas:    "masthead masthead"
                           "wordspanel gamebody"
                           "footer footer";
}

OK、それは形に入るために始めている.我々は、mastheadとフッターがうまくレイアウトされているが、言葉パネルとボードがオフになっている.
これは、Wordパネルとボードがゲーム本体DIV内に入れ子になっていることに起因します(Flexboxを使用してこのレイアウトを達成したい場合).グリッド領域GameBodyは冗長であり、ボードグリッド領域に置き換えることができます.

.App {
   ...
   grid-template-areas:    "masthead masthead"
                           "wordspanel board"
                           "footer footer";
}

それに応じてマークアップを調整します.

<div className="App">
    <Masthead />
    <WordsPanel />
    <Board />
    ...
</div>

そして、私はゲームの初期のレイアウトに達しているが、以下のマークアップ、少ないflexboxルールとどのようにディスプレイがレイアウトされて理解するためにはるかに簡単な方法で!
(グリッドラインとより良い理解のための領域をマークしました)

以下にCSSがどのように見えますか

.App {
   display: grid;
   width: 100vw;
   height: 100vh;

   grid-template-rows: 60px 1fr;
   grid-template-columns: 230px 1fr;

   grid-template-areas:    "masthead masthead"
                           "wordspanel board"
                           "footer footer";
}

.masthead {
   grid-area: masthead;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   background-color: darkslategrey;
   color: white;

   Button {
       margin: 0 6px;
       align-self: flex-end;
   }
}

.words-panel {
   grid-area: wordspanel;
   width: 230px;
   list-style: none;
}

.board {
   grid-area: board;
   position: relative;
   flex: 1 1 100%;
   margin: 16px;
}

.footer {
   grid-area: footer;
   display: flex;
   justify-content: flex-start;
   padding: 6px;
   background-color: darkslategrey;
   color: white;
}

いつものように、どのように良い、または他のテクニックを確認するには何かアイデアがある場合は、私たちの残りの部分と共有することを確認してください!
歓声
おい!あなたがちょうどあなたがさえずりの上で私を訪問するのを確実にするものを好きであるならば、以下の通りです)🍻
写真でSigmund on Unsplash