随着更多的人通过移动设备使用互联网，响应式设计技术变得越来越重要。现在，我们可以使用 CSS Grid 来轻松地构建响应式布局。在本文中，我们将学习如何使用 CSS Grid 实现一个响应式的输入框布局。
什么是 CSS Grid?
CSS Grid 是一种用于网格化布局的 CSS 属性。它允许开发者轻松地创建网格布局，将网格分成不同的区域，并确定不同的区域应该如何排列。 这种属性具有相当多的灵活性，因此可以实现各种不同的布局。
CSS Grid 的起步
在深入探讨如何使用 CSS Grid 创建响应式布局之前，我们需要了解如何启用这种技术。使用 CSS Grid 的第一步是在您的 CSS 样式文件中使用 display: grid; 属性，指定布局应该是基于网格的。
---------- - -------- ----- -
在这个例子中，.container 类的元素将被设置为一个网格，并且它的子元素将被放置在该网格中。
CSS Grid 的网格定义
在网格系统设计中，我们需要定义基于网格的布局规则。这些布局规则可以帮助我们确定我们需要的行和列的数量以及它们的大小和位置。
在 CSS Grid 中，我们使用 grid-template-columns 和 grid-template-rows 属性来定义列和行。例如，以下代码块将定义一个具有三列和两行的网格：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- --- ---- -
这种情况下，我们将会得到一个相等的三列两行网格布局。
CSS Grid 的网格放置
在网格定义完成之后，我们可以使用 grid-column 和 grid-row 属性来定位元素。grid-column 定义了元素应该跨越的列，而 grid-row 属性定义了元素应该跨越的行。例如：
----- - ------------ - - -- --------- - - -- -
这个例子中的 .item 类的元素将会跨越第一和第二列，并且只占一行。
实现响应式输入框布局
现在，我们已经了解了 CSS Grid 的基本知识，让我们看看如何使用它来实现响应式输入框布局。
HTML
我们使用以下 HTML 代码来创建输入框布局：
---- ------------------ ------ ------------------------ ------ ----------- ----------- --------- -- ------ -------------------------- ------ ------------ ------------ ---------- -- ------ ------------------------------ --------- -------------- ------------------------ ------
CSS
我们使用以下 CSS 代码来实现该布局：
---------- - -------- ----- ---------------------- --- ---- ------------------- --- --- ---- --------- ----- - ----- - ------------ ----- - -------------------- - ------------ - - -- - ------------------- -------------------- -------- - ------ ----- -------- ------ ------- --- ----- ----- -------------- ------- -
在这个例子中，我们将布局分为两列和三行，并使用 grid-gap 属性来定义每个单元格之间的间隙。在第三个行单元格中，我们使用 grid-column 属性将文本框跨越两列来填充整行。
响应式布局
通过媒体查询，我们可以让布局随着屏幕尺寸改变而变化。例如，以下 CSS 代码将使布局成为一个单列布局，以便适应更小的移动设备：
------ ------ --- ----------- ------ -
---------- -
---------------------- ----
------------------- -----
-
-------------------- -
------------ --
-
-在这种情况下，我们将视窗宽度最大限制为 768 像素，然后用一个单列布局替换原有的两列布局。
结论
通过使用 CSS Grid，我们可以轻松地创建响应式布局。在这篇文章中，我们介绍了如何使用 CSS Grid 创建一个带有输入框的响应式布局。我们学习了如何定义网格，确切的元素位置。此外，我们了解了如何使用媒体查询来创建响应式网格。以此为基础，新的响应式布局的实现方法也变得更加容易也更加简单了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671cc9e99babaf620fb280a8