css 网格布局_如何使用CSS网格构建Web表单布局

css 网格布局

在本教程中，我们将探讨如何使用CSS Grid构建几个不同的Web表单。 对于每个示例，我们将首先使用浮点数，然后查看如何使用CSS Grid进行相同的布局。

如果您以前对CSS网格没有任何了解，请阅读我们的初学者系列文章了解CSS网格布局模块 。 让我们开始！

1.基本注册表格

在此布局中，我们将表单分为两列，以便我们可以在左侧显示标签，在右侧显示输入字段。

使用“传统” CSS

这种布局的传统方法可能是使用浮点数为我们提供列。 注意，我们没有form元素的包装器。 我们将直接设置标签和输入的样式。

    First Name
    

    Last Name
    

    

form {
    overflow: hidden;
}

label {
    float: left;
    width: 200px;
    padding-right: 24px;
}

input {
    float: left;
    width: calc(100% - 200px);
}

button {
    float: right;
    width: calc(100% - 200px);
}

您会注意到我们在这里使用calc() ，这使我们能够将左列固定为200px宽，而右列保持流畅。

这是结果，还有一些其他的美学样式：

使用CSS网格布局

使用“网格”时，我们的目标是定义两个列，然后将每个元素放在其所需的列中。

第一步是在父元素form上定义网格：

form {
    display: grid;
}

然后，我们需要使用grid-template-columns划分该网grid-template-columns ：

form {
    display: grid;
    grid-template-columns: 200px 1fr;
}

根据上述CSS，第一列的固定宽度为200px ，第二列将占用剩余可用空间的1fr （“一个分数”）。

现在，我们需要定义标签和输入的位置。 要做到这一点，我们将使用grid-column与网格线具体数值：

基于这些网格线，我们将对标签，输入和按钮应用以下规则：

label {
    grid-column: 1 / 2;
}

input,
button {
    grid-column: 2 / 3;
}

标签将出现在从第1行开始到第2行结束的列中。输入和按钮将放置在从第2行开始到第3行结束的列中。

最后，我们使用grid-gap在行和列之间添加16px的装订线：

form {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 16px;
}

2.联络表格

在此布局中，我们要实现以下目标：

1. 列的高度应相等，以便侧边栏和表单包装器的高度相同。
2. 我们希望将表单（右侧）进一步分为两列，更改按钮以使其充满整个宽度。

完全可以使用浮点数来构建此布局。 但是，我们将需要为左列设置一个min-height ，否则它将不会假定完整高度。 还有其他“传统”方法可以解决此问题，但没有一个是特别漂亮的方法。

使用“传统” CSS

总结一下，对于浮点数，我们需要：

1. 将min-height添加到左列。
2. 漂浮触点并形成包装纸。
3. 添加一个clearfix或overflow: hidden; 保持包装纸的高度。
4. 浮动表单元素并在它们之间添加边距。
5. 重置textarea浮动并发送按钮，然后使其充满整个宽度。

那是很多工作，对吗？

更好的方法是使用Flexbox或Grid解决此问题。 在这种情况下，由于我们在水平和垂直方向上排列元素，因此我更喜欢使用Grid。

使用CSS网格布局

首先，在包装器上声明一个网格并将其分为两列。

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

我们的表单元素也需要声明为网格：

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

应用上述规则后，我们将获得以下信息：

我们需要通过从网格线1到网格线3拉伸最后两个元素来填充整个宽度。

.full-width {
    grid-column: 1 / 3;   
}

3.个人资料表格

现在是时候进行最后一次表单布局了。 在此示例中，我们包含了供用户上传其个人资料照片的输入。 它应该放在右上角。

使用“传统” CSS

我们将使用以下标记进行构建：

    

        Your name
        
    
    

        Email
        
    
    

        Upload your photo
        
    
    

        Save
    

简要介绍传统方法，我们可以通过以下步骤实现布局：

1. 添加position: relative; 到表单元素。
2. 将文件输入绝对定位在右上角。
3. 将填充添加到表单，其宽度与文件输入的宽度相同。
4. 指定文件输入的固定宽度。

使用CSS网格布局

我们不要过多地谈论传统方法。 使用Grid，我们将表单分为两列，如下所示：

第一列将占用第二列水平空间的两倍，我们将使用fr单位实现这一点：

form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}

建立网格后，我们需要在网格线1和网格线2之间放置表格元素：

form p {
  grid-column: 1 / 2;
}

下一步是将输入文件放在第二列中。 为了做到这一点，我们将其放置在网格线2和网格线3之间。垂直移动，使它跨越从网格线1到网格线2的行。

.input-file-wrapper {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

结论

做得好！ 我们已经介绍了构建Web表单时使用CSS Grid的几个不同示例。 您会注意到，与使用传统的布局技术相比，通过编写几行代码，我们节省了很多时间和精力。 由于CSS @supports可以帮助我们将特定功能用作增强功能，因此您可以从今天开始使用上述所有示例。

您对改善这些布局有什么建议吗？ 在下面的评论中让我知道！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-web-form-layouts-with-css-grid--cms-28776

css 网格布局