grid template areas for css grid moving everything to top right

Question

I have the following code in HTML

   .gridDiv {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr 2fr;
        grid-template-areas: 
            "topLeft topMiddle topRight"
            "blank form blank";
    }

    .leftButton {
        background-color: yellow;
        grid-area: topLeft;
    }

    .middleButton {
        background-color: red;
        grid-area: topMiddle;
    }

    .rightButton {
        background-color: green;
        grid-area: topRight;
    }

    .bottomForm {
        grid-area: form;
    }

    <div class="gridDiv">
        <div class="leftButton"><button>This should be in top-left</button></div>
        <div class="middleButton"><button>This should be in top middle</button></div>
        <div class="rightButton"><button>This should be in top right</button></div>
        <div class="bottomForm">
            <form action="/action_page.php">
              <label for="fname">First name:</label><br>
              <input type="text" id="fname" name="fname" value="John"><br>
              <label for="lname">Last name:</label><br>
              <input type="text" id="lname" name="lname" value="Doe"><br><br>
              <input type="submit" value="Submit">
            </form> 
        </div>
    </div>

:

I want the 3 divs containing the buttons to be on the top row and positioned in the top left, top middle, and top right, while I want the div containing the form to be in the bottom row in the middle, as indicated by the grid-template-areas in the gridDiv style. However, this is clearly not working, with everything being moved to the top right for some reason - does anyone know what the problem is?

score 0 · Answer 1 · answered Jan 20 '21 at 08:35

blank seems to be a reserved word, use a single dot instead will do.

I have not found any official specification yet about it. aside https://drafts.csswg.org/css-grid/#grid-area-concept

.gridDiv {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
  grid-template-areas: "topLeft topMiddle topRight" 
                       ".       form      .";
}

.leftButton {
  background-color: yellow;
  grid-area: topLeft;
}

.middleButton {
  background-color: red;
  grid-area: topMiddle;
}

.rightButton {
  background-color: green;
  grid-area: topRight;
}

.bottomForm {
  grid-area: form;
}

<div class="gridDiv">
        <div class="leftButton"><button>This should be in top-left</button></div>
        <div class="middleButton"><button>This should be in top middle</button></div>
        <div class="rightButton"><button>This should be in top right</button></div>
        <div class="bottomForm">
            <form action="/action_page.php">
              <label for="fname">First name:</label><br>
              <input type="text" id="fname" name="fname" value="John"><br>
              <label for="lname">Last name:</label><br>
              <input type="text" id="lname" name="lname" value="Doe"><br><br>
              <input type="submit" value="Submit">
            </form> 
        </div>
    </div>

grid template areas for css grid moving everything to top right

1 Answers1