时间戳

首页 > 解决方案 > CSS网格的网格模板区域将所有内容移动到右上角

html - CSS网格的网格模板区域将所有内容移动到右上角

问题描述

我在 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>

：

我希望包含按钮的 3 个 div 位于顶行并位于左上、中上和右上角，而我希望包含表单的 div 位于中间的底行，如gridDiv 样式中的网格模板区域。但是，这显然行不通，由于某种原因，所有内容都被移到了右上角-有人知道问题出在哪里吗？

标签： htmlcsscss-grid

解决方案

blank似乎是一个保留字，用一个点代替就可以了。

我还没有找到任何关于它的官方规范。除了https: //drafts.c​​sswg.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>

推荐阅读