By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML display:grid problem


New Coder
Hi all, this is my first posting on this forum.
I want to make some kind of calculator exercicing with HTML grid system, however i ranned into problem.
at class="block2" i want the letter C to be positioned at the very start, something like this(https://user-images.githubusercontent.com/48981108/56517653-6da3ae80-650b-11e9-8f8d-00c073ae08ce.png)
i want the solution to be done using the grid system, not with justify-content and then some padding at the start.
Again i want the letter c above number 4 or above number 6.
Can someone help me achieve this?

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;

        main {
            min-height: 100vh;
            background-color: azure;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;

        .container {
            width: 400px;
            height: 500px;
            background-color: rgb(51, 38, 91);
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(4, 1fr) ;

        .block {
            border: 2px solid red;
            background-color: aqua;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

        .block1 {
            background-color: #1e1e1e;
            grid-column: 1 / -1;
            margin-bottom: -10px;
            grid-column: 1/-2;


        <div class="container">
            <div class="block block1"> 1</div>
            <div class="block block2">C</div>
            <div class="block block3">3</div>
            <div class="block block4">4</div>
            <div class="block block5">5</div>
            <div class="block block6">6</div>
            <div class="block block7">7</div>
            <div class="block block8">8</div>
            <div class="block block9">9</div>
            <div class="block block10">10</div>
            <div class="block block11">11</div>
            <div class="block block12">12</div>
            <div class="block block13">13</div>
            <div class="block block14">14</div>
            <div class="block block15">15</div>
            <div class="block block16">16</div>
            <div class="block block17">17</div>
            <div class="block block18">18</div>

New Threads

Buy us a coffee!

Top Bottom