主页 / 问题 / 1269079
Accepted
rabbit
Asked:2022-04-12 14:52:27 +0000 UTC2022-04-12 14:52:27 +0000 UTC

使用网格模板区域定位元素

  • 772

我无法使用gridgrid-template-area display创建布局模板。

我需要这样的设置：

input_1 input_1
input_2 input_3
input_4 input_4
input_5 input_5
input_6 input_7 input_8

我已经根据原理制作了类似的模板grid-template-area，并且我对网格有经验，但是我不明白为什么我的这个特殊模板不起作用。

我也尝试使用符号点 - .，但这没有帮助。

我希望输入在宽度上均匀拉伸。像这儿：

在此处输入图像描述

我知道我犯了一个小错误，也许是一个愚蠢的错误，但我找不到那个。

感谢您的耐心和时间。

form {
    display: grid;
    grid-template-areas: 'input_1 input_1' 
                         'input_2 input_3' 
                         'input_4 input_4' 
                         'input_5 input_5' 
                         'input_6 input_7 input_8';    
}

.input_1 {
    grid-area: input_1;
}

.input_2 {
    grid-area: input_2;
}

.input_3 {
    grid-area: input_3;
}

.input_4 {
    grid-area: input_4;
}

.input_5 {
    grid-area: input_5;
}

.input_6 {
    grid-area: input_6;
}

.input_7 {
    grid-area: input_7;
}

.input_8 {
    grid-area: input_8;
}
<form>
  <input class="input_1" type="text">
  <input class="input_2" type="text">
  <input class="input_3" type="text">
  <input class="input_4" type="text">
  <input class="input_5" type="text">
  <input class="input_6" type="text">
  <input class="input_7" type="text">
  <input class="input_8" type="text">
</form>

html

2 个回答

  1. Best Answer

    在您的 TK 上，它设置了只使用grid-template-area什么？尽管我可以假设您正在通过识别新的网格属性进行某种训练。不过，为了以防万一，我还是把它作为答案。

    form {  
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(6, 1fr);  
  grid-gap: 10px;
}

.input_2, .input_3 {
  grid-column: span 3;
}

.input_1, .input_4, .input_5 {
  grid-column: span 6;
}

.input_6, .input_7, .input_8 {
  grid-column: span 2;
}
    <form>
  <input class="input_1" type="text">
  <input class="input_2" type="text">
  <input class="input_3" type="text">
  <input class="input_4" type="text">
  <input class="input_5" type="text">
  <input class="input_6" type="text">
  <input class="input_7" type="text">
  <input class="input_8" type="text">
</form>

    • 4

  2. 要解决 using grid-template-areas，您总共需要指定 6 个单元格。因此，1 个输入将等于 2 个单元格，1.5 个输入将占用 3 个单元格。

    form {
    display: grid;
    grid-template-areas: 'input_1 input_1 input_1 input_1 input_1 input_1' 
                         'input_2 input_2 input_2 input_3 input_3 input_3' 
                         'input_4 input_4 input_4 input_4 input_4 input_4' 
                         'input_5 input_5 input_5 input_5 input_5 input_5' 
                         'input_6 input_6 input_7 input_7 input_8 input_8';    
}

.input_1 {
    grid-area: input_1;
}

.input_2 {
    grid-area: input_2;
}

.input_3 {
    grid-area: input_3;
}

.input_4 {
    grid-area: input_4;
}

.input_5 {
    grid-area: input_5;
}

.input_6 {
    grid-area: input_6;
}

.input_7 {
    grid-area: input_7;
}

.input_8 {
    grid-area: input_8;
}
    <form>
  <input class="input_1" type="text">
  <input class="input_2" type="text">
  <input class="input_3" type="text">
  <input class="input_4" type="text">
  <input class="input_5" type="text">
  <input class="input_6" type="text">
  <input class="input_7" type="text">
  <input class="input_8" type="text">
</form>

    • 3

相关问题