CSS 网格生成器快速使用和学习网格布局

terry 2年前 (2023-09-27) 阅读数 65 #数据结构与算法

CSS 网格生成器

CSS 网格生成器是由Sarah Drasner 创建的免费工具。它是一个可视化设计工具，可以让我们创建一个基本的网格布局，然后用它生成相应的代码来帮助我们快速布局。

第一次进入的界面是这样的：

CSS 网格布局示例

当我学习一些东西时，我发现最好的学习方式就是使用现有的工具来创建实用的东西。在本文中，我们将从简单的布局开始，然后使用 CSS 网格生成器 生成在实际项目中使用所需的代码。

首先从如下图所示的典型布局开始：

然后在 CSS Grid Generator 界面右侧更新相应的以下内容：

行：4
列：3♾列间距：20
行间距：20

间距允许我们的内容之间有一定量的空白。可以只在列之间使用空格，但我想在 Header 和 Footer 之前留下一些空白，所以我也使用了行间距。

接下来，您需要定义应用程序的不同区域。在CSS网格生成器中，您可以单击并拖动要合并的位置以创建区域。我们希望页脚跨越整个网格，侧边栏占据一个单元格，主要内容区域跨越2列，页脚最终的效果如下：

这看起来有点像我们想要的布局，但是仍然有一些具体的尺寸需要定义。在CSS网格生成器中，您会注意到每行和每列旁边都有一个输入字段，可用于设置特定大小。

页眉：100px高度
侧边栏：200px宽度
页脚：50px高度

这看起来更像我们想要的布局，但你可以问♿fr
轨道可以用任何单位定义的长度。 Grid 还代表额外的长度单位，可帮助您创建灵活的 Grid 轨道。新单元格 fr 代表网格容器中可用空间的一小部分。第二行 
 1fr 告诉该区域占用剩余的可用空间。如果将容器设置为100vh，它将占据页面的全部内容以及列。 
由 CSS Grid 生成的代码
点击“请给我示例中的代码”即可查看相应布局生成的 CSS 代码： 
.parent { 
display: grid; 
grid-template-columns: 200px 1fr 1fr 200px; 
grid-template-rows: 100px 1fr 50px; 
grid-column-gap: 20px;
grid-row-gap: 20px; 
.div1 { grid-area: 1 / 1 / 2 / 5; } 
.div2 { grid-area: 2 / 1 / 3 / 2; } 
.div3 { grid-area: 2 / 2 / 3 / 4; } 
.div4 { grid-area: 2 / 4 / 3 / 5; } 
.div5 { grid-area: 3 / 1 / 4 / 5; } 
}
复制代码
创建简单布局htm 并添加以下代码: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

</body>
</html>
复制代码
 接下来添加上面生成的 CSS: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .parent {
      display: grid;
      grid-template-columns: 200px 1fr 1fr 200px;
      grid-template-rows: 100px 1fr 50px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      height: 100vh;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 5;
    }

    .div2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .div3 {
      grid-area: 2 / 2 / 3 / 4;
    }

    .div4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .div5 {
      grid-area: 3 / 1 / 4 / 5;
    }
  </style>
</head>
<body>

</body>
</html>
复制代码
 然后添加相应的标签: 
<body>
  <div class="parent">
    <div class="div1">
      Header
    </div>
    <div class="div2">
      Left Sidebar
    </div>
    <div class="div3">
      Main Content
    </div>
    <div class="div4">
      Right Sidebar
    </div>
    <div class="div5">
      Footer
    </div>
  </div>

</body>
复制代码
 最后添加以下 CSS 为 .div1 - .divⶶⶀ 5 颜色: 
div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}
复制代码
 运行：" data- src="https://user-gold-cdn.xitu.io/2019/8/19/16ca72ee7d77bc9f?imageView2/0/w/1280 960/format/webp/ignore-error /1" height="20" data -width="800" data-height="108" />
 看起来不错，但你希望它占据整个浏览器所以你需要添加  高度： 100vh到班级.parent：.parent：
.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}
复制代码
结果效果：网格网格相邻的两个网格线之间的线是网格轨道。当然，同一方向的1和3或者不同方向的1和2不是相邻网络。线路。 
 相邻的网格线是如下所示的网格轨道。在黑色 1 和 2 之间创建网迹（背景为深橙色）： 
上面总共有 5 条网迹，水平灰色 1 和 2、2 和 3、3 和 4，垂直黑色 1 和 2， 2和3，共5个。 
 网格单元（网格单元） 
 两个相邻的列网格 网格单元由一行和相邻的两行网格线组成。例如，下面的深橙色背景是网络驱动器。 
 网络单元必须与Html中找到的网络项（项目）区分开 对于House元素，网络单元是一个cell，在定义容器时将其划分为多个cell。 
网络区域（Network Area）加上
四条网络线围成的总空间。
fr 单位（加食物） 
 剩余空间分配编号用于分配一系列长度值之间的剩余空间。如果指定了多个部分，则剩余空间与相应的数字成比例。分发。 
作者：前端小智
链接：https://juejin.im/post/5d59e6e1f265da03c7219fab
来源：掘金ⶶ致作者商业转载请联系作者授权。非商业转载请注明出处。