CODEWITHSUNDEEP
htmlcsscentering
Juan Carlos Ortiz
Juan Carlos Ortiz

Reputation: 133

Center a whole CSS grid with respect to the whole page

I have two tables that I want to be centered in my webpage (link here: https://juancarlosortizr.github.io/sudoku/sudoku.html). The CSS code for the tables is:

But I've tried looking everywhere and all I find is how to center text within the cells with respect to the cell itself; not how to center (horizontally) the table as a whole. Is there a way?

    .grid-container {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
    } 

    .grid-container2 {
    display: inline-grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    }

    .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size: 18px;
    text-align: center;
    }
    <body>
    
    <!-- header and navbar omitted here -->
    
    <!-- The flexible grid (content) -->
    <div class="row">
      <!-- "side" omitted here -->
    
      <div class="main">
    
        <h2 id="sudoku">Sudoku Solver</h2>
            <p>Input a solvable sudoku, and it'll spit out a solution! If it's unsolvable, it'll let you know.

                You can leave empty squares empty, or fill them out with a zero or a dot.
            </p>

                <div class="grid-container">
                    <div class="grid-item"><input type="number" id="x1" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x2" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x3" name="quantity" min="1" max="9"></div> <!-- etc... -->
                    <div class="grid-item"><input type="number" id="x81" name="quantity" min="1" max="9"></div>
                  </div>
                </div>

                <p> <button onclick="solveSudoku()">Click when ready!</button> </p>

                <body> 
                    Here is the solution board. If it is full of dots, that means no solution exists! (Sadly, in the current version of the project, the algorithm doesn't detect whether or not the solution is unique).
                </body>
                <p>

                <body>    
                <div class="grid-container2">
                    <div class="grid-item"> <text id="board1"></text> </div>
                    <div class="grid-item"> <text id="board2"></text> </div>
                    <div class="grid-item"> <text id="board3"></text> </div> <!-- etc... -->


                    <div class="grid-item"> <text id="board81"></text> </div>
                </div>
            </body>

            </p>
      </div>
       
    </body>

The whole thing can be found at https://github.com/juancarlosortizr/juancarlosortizr.github.io/blob/master/sudoku/sudoku.html.

Upvotes: 2

Views: 3806

Answers (2)

mrsagar105
mrsagar105

Reputation: 204

You could try this

Instead of display: inline-grid;
Keep it: display: grid;

And add
width: fit-content;
in both the containers

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
} 

.grid-container2 {
display: grid;
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
}

Upvotes: 4

Joshua Smart
Joshua Smart

Reputation: 206

I have a working solution, add these rules to your css

.panelb {
    display: flex;
}

.grid-container {
    /* flex: 1; <-- remove this line */
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
}

A similar method can be used for the second table although I see in your HTML you may need to add a container div.

Upvotes: 2

Related Questions