BinaryDevelop
  1. ホーム
  2. css

[解決済み] css グリッドによる垂直・水平方向の中央揃え 4x4 正方形グリッド

2022-02-15 04:23:12

質問

divとcss-gridを使って2048のゲームを書きたいのですが、どうすればいいですか？出力はこのようなイメージです。

ブラウザのウィンドウに収まる外側の部分があり、左真ん中のdiv（という名前の）の真ん中（水平と垂直）に4x4グリッドを書きたいだけです。 game-container ) 

<div class = "game-container">
  <div class = "game">
    <div class = "game-cell"></div>
    <!-- 16 game cells total -->
    <div class = "game-cell"></div>
  </div>
</div>

を使って4x4のグリッドを作りました。 

div.game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

しかし、いくつかの点で問題があります。

  • それぞれの game-cell 正方形 (50pxとする)
  • の真ん中に数字を表示するには？ game-cell
  • div同士を接触させる方法

それぞれは作れますが、一度に全部は作れません。

さらに、どのように game の真ん中に（写真のように）divを配置します。 game-container divになります。

PS. 何かを簡略化するのであれば、Bootstrapを多少使っても構わないと思います。

外側のコンテナに関するいくつかの情報。 

html, body, div.container{
    height: 100%;
    margin: 0;
    padding: 0;
}

div.container {
  display:grid;
  grid-template-rows: 3fr 9fr 2fr;
  grid-template-columns: 3fr 5fr;
  grid-gap: 2px;
  background-color: yellow;
}

解決方法は？

ここでは、コミュニティからの回答やコメントを参考に、完全な解決策をご紹介します。 

html, body, div.container{
	height: 100%;
	margin: 0;
	padding: 0;
}

div.container {
  display:grid;
  grid-template-rows: 3fr 9fr 2fr;
  grid-template-columns: 3fr 5fr;
  grid-gap: 2px;
  background-color: yellow;
}

div.container > div {
  background-color: #99c2ff;
}

div.header {
  grid-column: 1/3;
  grid-row: 1/2;
}

div.game-container {
  display: flex;
  grid-column: 1/2;
  grid-row: 2/3;
  text-align: center;
}

div.menu {
  grid-column: 2/3;
  grid-row: 2/3;
}

div.footer {
  grid-column: 1/3;
  grid-row: 3/4;
}


div.game {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(4, 80px);
  margin: auto;
}

div.grid-cell {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 20px;
  background-color: #e6f0ff;
}

div.value-cell {
  margin: auto;
}

h1, h2, h3, h4 {
	text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>2048</title>
  </head>

  <body>

    <div class="container">
      <div class="header">
        <h3>Title</h3>
      </div>
      <div class = "game-container">
          <div class = "game">
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">2</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">16</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">1024</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           </div>
       </div>
       <div class="menu">
         <p>Some info</p>
       </div>
       <div class="footer">
         <h4>Footer</h4>
       </div>
     </div>

  </body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します