Vertical and horizontal centered 4x4 square grid using css grid

Question

I want to write 2048 game using divs and css-grid. This is how I imagine the output:

I have the outer part, which fits to the browser window, and I just want to write 4x4 grid in the middle (horizontal and vertical) of the middle-left div (called 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>

I made a 4x4 grid using:

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

However, I have a problem with few things:

How to make each game-cell square (lets say 50px)
How to display a number in the middle of a game-cell
How to make divs touch each other

I can make each one of this, but not all at once.

Moreover, how to display game div in the middle (as in the picture) of the game-container div.

PS. I don't mind using some Bootstrap if it simplifies something.

Some info concerning outer container:

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;
}

Why are you using `1fr` instead of `50px` which is the size you want. then set the `game` div to 200px? — Paulie_D, May 03 '18 at 16:22
@Paulie_D Great! It fixes the first part of the problem. Now I jus need to center the `game` div in the `game-container`. Do you know how to do it? — Fallen Apart, May 03 '18 at 16:27
There's **hundreds** of centering questions on SO. Just look at the Related questions in the right sidebar. — Paulie_D, May 03 '18 at 16:28
@GautamNaik It centers the text, but the `game` div is still in the top left corner. — Fallen Apart, May 03 '18 at 16:45
possible duplicate: [Centering in CSS Grid](https://stackoverflow.com/questions/45536537/centering-in-css-grid) — Michael Benjamin, May 03 '18 at 17:18

score 2 · Answer 1 · answered May 03 '18 at 16:53

2

use flexbox to acheive it outside grid.

div.game {
  display: grid;
  width: 50vw;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 120px;
  height: 120px
}

.game-cell {
  width: 30px;
  height: 30px;
  border: 1px solid ;
  box-sizing: border-box;
}

.left-half{
  width: 50vw;
  height: 100vh;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

body{
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class = "game-container">
  <div class="left-half">
    <div class = "game">
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
    </div>
  </div>
</div>
</body>
</html>

answered May 03 '18 at 16:53

ashish singh

6,526
2
15
35

I noticed that adding just outside div with `display: flex`; and putting `margin: 0 auto;` into `game` div aligns everythong horizontaly. Can we do the simillar thing for vertical allignment. PS. I found your solution too invasive. – Fallen Apart May 03 '18 at 17:02
oh vertical centering can get a little bit messy , i find flex to be cleaner solution , however a simple search on google for vertical centering should give you a lot of stuff . just one of the answers https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – ashish singh May 03 '18 at 17:10
PS. In my case `game-container` is the same as `left-half` in yours. So sorry, I need no more divs. I just added now to `game-container` – Fallen Apart May 03 '18 at 17:10
yeah then that should be ok right ? adding styles of left-half on game-container should help you – ashish singh May 03 '18 at 17:11
Ok. I guess I will just add the top padding to the `game-container` – Fallen Apart May 03 '18 at 17:11
but it will not look centered in different height screens – ashish singh May 03 '18 at 17:12
I know. Just neat top padding will look OK. – Fallen Apart May 03 '18 at 17:13
Solved. Just adding `margin: auto;` to the `game-container` aligns everything vertically and horizontally – Fallen Apart May 03 '18 at 17:27
oh if its parent is `display:flex;` then it should work – ashish singh May 03 '18 at 17:29
Yes, is is a child of `display:flex`. – Fallen Apart May 03 '18 at 17:29

score 1 · Answer 2 · answered May 03 '18 at 17:09

1

Add this to your .game-container css

 display: flex;
 align-items: center;
 justify-content: center;

.game {
  display: grid;
  width: 120px;
  height: 120px;
  border:1px solid black;
}

.game-container{
    height: 500px;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}

<div class = "game-container">

    <div class = "game">
     
    </div>

</div>

answered May 03 '18 at 17:09

Gautam Naik

8,990
3
27
42

@FallenApart, that was for demo purpose – Gautam Naik May 03 '18 at 17:17
Adding height and width breaks my main container layouts. – Fallen Apart May 03 '18 at 17:17
Ok. Thanks, but I guess I will abandon vertical centering and just add some padding to the top – Fallen Apart May 03 '18 at 17:18
if u want to occupy full height of screen then use 100vh as height of container – Gautam Naik May 03 '18 at 17:18
It alredy occupy the whole screen. See the edited question – Fallen Apart May 03 '18 at 17:21
Solved. Just adding `margin: auto;` to the `game-container` aligns everything vertically and horizontally – Fallen Apart May 03 '18 at 17:27

score -1 · Accepted Answer · answered May 03 '18 at 17:46

Here is the complete solution combined using answers and comments from comunity.

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>

Vertical and horizontal centered 4x4 square grid using css grid

3 Answers3