Grid CSS 布局是一种用于创建网格布局的 CSS 模块，它提供了一种灵活的方式来定位和排列元素，以便在多种不同的屏幕尺寸和设备上创建响应式布局。
在 Grid CSS 中，页面被分成一个网格，由行和列组成。每个单元格可以包含一个或多个元素。网格中的每个单元格都可以被定义为一个网格区域，网格区域可以跨越多个行和列。这使得它成为一种非常灵活的布局方法。
使用 Grid CSS 布局的步骤：
- 定义一个网格容器
首先，需要将要使用网格布局的元素定义为网格容器。在 CSS 中，可以通过设置元素的 display 属性为 grid 或 inline-grid 来实现。例如：
.container {
display: grid;
}
- 定义网格行和列
接下来，需要定义网格的行和列。可以通过设置 grid-template-rows 和 grid-template-columns 属性来实现。例如：
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 150px 150px;
}
这将创建一个具有两行和两列的网格，每行高度为 100px，每列宽度为 150px。
- 定义网格区域
可以使用 grid-row 和 grid-column 属性来定义每个元素所占据的网格区域。例如：
.item {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
这将使 .item 元素跨越第一行和第一列的网格区域。
- 使用网格间距
可以使用 grid-row-gap 和 grid-column-gap 属性来设置行和列之间的间距。例如：
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 150px 150px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
这将在行和列之间创建 10px 的间距。
- 响应式布局
可以使用媒体查询来创建响应式布局。例如，可以在窗口大小小于 768px 时，将网格布局切换为单列布局：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
这将使 .container 元素变为单列布局，适合在小屏幕设备上使用。
总之，Grid CSS 布局是一种非常强大和灵活的布局方法，它可以帮助开发者轻松创建响应式布局，并且可以根据需要定义任意数量的行和列。
属性列表
以下是 Grid 相关的样式属性及其详细说明：
display: grid;或display: inline-grid;
这个属性定义一个元素作为网格容器，并且其所有子元素将成为网格项。使用 grid 作为 display 值时，元素将显示为块级元素，而 inline-grid 将显示为内联元素。示例代码：
.container {
display: grid;
}
grid-template-rows和grid-template-columns
这些属性定义网格的行和列的大小、数量和名称。它们的值可以是一个长度、百分比、一个 fr 单位（表示剩余空间的比例），或一个 minmax() 函数。此外，可以使用 repeat() 函数来快速重复一些值。示例代码：
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
}
grid-template-areas
这个属性定义一个网格区域的布局。可以通过将相同名称的区域组合到一个字符串中来定义网格区域。示例代码：
.container {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 1fr 200px;
}
grid-gap
这个属性为网格行和列之间设置间距。它可以接受一个长度或百分比值，用于设置行和列之间的间距。可以使用 grid-row-gap 和 grid-column-gap 属性来分别设置行和列之间的间距。示例代码：
.container {
display: grid;
grid-gap: 10px;
}
grid-auto-rows和grid-auto-columns
这些属性定义当没有显式指定网格行和列的大小时，自动创建的行和列的大小。它们的值可以是一个长度、百分比、一个 fr 单位，或一个 minmax() 函数。示例代码：
.container {
display: grid;
grid-auto-rows: 100px;
grid-auto-columns: 1fr;
}
grid-auto-flow
这个属性定义如何分配自动创建的网格行和列。它可以是 row（默认值，先创建行再创建列）、column（先创建列再创建行）、row dense（创建行并在网格中填充空白）、column dense（创建列并在网格中填充空白）中的一个。示例代码：
.container {
display: grid;
grid-auto-flow: column dense;
}
grid-row-start、grid-row-end、grid-column-start和grid-column-end
这些属性用于定义一个网格项的位置和跨度。它们的值可以是一个数字（表示行或列的编号），或一个表示网格区域的名称（在 grid-template-areas 中定义）。可以使用 span 关键字来定义跨度。示例代码：
.item {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}
或者可以简写为：
.item {
grid-row: 1 / 3;
grid-column: 2 / 4;
}
grid-area
这个属性可以一次性设置一个网格项的位置和跨度。它的值是由四个数字或四个区域名称组成的字符串。示例代码：
.item {
grid-area: 1 / 2 / 3 / 4;
}
或者可以使用区域名称：
.item {
grid-area: header;
}
justify-items和align-items
这些属性定义了网格项在网格容器中的对齐方式。justify-items 属性控制水平方向的对齐方式，它可以是 start（默认值，左对齐）、end（右对齐）、center（居中对齐）、stretch（拉伸对齐）中的一个。align-items 属性控制垂直方向的对齐方式，它可以是 start（顶部对齐）、end（底部对齐）、center（居中对齐）、stretch（拉伸对齐）中的一个。示例代码：
.container {
display: grid;
justify-items: center;
align-items: center;
}
justify-content和align-content
这些属性定义了网格行和列之间的对齐方式。justify-content 属性控制水平方向的对齐方式，它可以是 start（默认值，左对齐）、end（右对齐）、center（居中对齐）、stretch（拉伸对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔是相邻项目间隔的一半）中的一个。align-content 属性控制垂直方向的对齐方式，它可以是 start（顶部对齐）、end（底部对齐）、center（居中对齐）、stretch（拉伸对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔是相邻项目间隔的一半）中的一个。示例代码：
.container {
display: grid;
justify-content: center;
align-content: center;
}
以上是 Grid 相关的样式属性
案例
下面两个案例仅表示对grid css的属性的学习示例，不考虑其它因素，各位勿怪！
注册页面
在这个示例中，我们使用了 grid-template-columns 和 grid-template-rows 来定义网格的布局，并使用 auto-fit 和 minmax 函数实现响应式布局，使页面在不同的终端下都可以正常显示。我们还使用了 gap 属性定义了网格的行和列之间的间距，并使用 padding 属性增加了容器的内边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto 1fr auto;
gap: 20px;
padding: 20px;
}
.form {
background-color: #f5f5f5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
}
form {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
width: 100%;
max-width: 400px;
}
label {
display: block;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
text-align: left;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
font-size: 1.2em;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
button[type="submit"]:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<div class="form">
<h2>用户注册</h2>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<label for="password">密码</label>
<input type="password" id="password" name="password">
<button type="submit">注册</button>
</form>
</div>
</div>
</body>
</html>
简单的blog首页
这是一个基本的左右分栏布局，其中左侧是侧边栏，右侧则是文章列表和文章内容。使用了 Grid 布局来实现，通过 grid-template-columns 和 grid-template-rows 属性来定义网格布局，通过 repeat(auto-fit, minmax(300px, 1fr)) 实现自适应布局，即网格自动填充容器，每个网格的最小宽度为 300 像素，最大宽度为 1 个网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto 1fr auto;
gap: 20px;
padding: 20px;
}
.header,
.footer {
background-color: #ccc;
grid-column: 1 / -1;
}
.sidebar {
background-color: #f5f5f5;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin-bottom: 10px;
}
nav ul li a {
display: block;
padding: 10px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
nav ul li a:hover {
background-color: #0062cc;
}
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.articles {
background-color: #f5f5f5;
padding: 20px;
}
.articles h2 {
margin-top: 0;
}
.articles ul {
list-style: none;
margin: 0;
padding: 0;
}
.articles ul li {
margin-bottom: 10px;
}
.articles ul li a {
color: #007bff;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.articles ul li a:hover {
color: #0062cc;
}
.content {
padding: 20px;
background-color: #fff;
}
.content h2 {
margin-top: 0;
}
.footer {
background-color: #ccc;
grid-column: 1 / -1;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>我的blog</h1>
</header>
<div class="sidebar">
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
</ul>
</nav>
</div>
<main class="main">
<section class="articles">
<h2>文章列表</h2>
<ul>
<li><a href="#">文章标题</a></li>
<li><a href="#">文章标题 2</a></li>
</ul>
</section>
<section class="content">
<h2>文章标题</h2>
<p>这是一个基本的左右分栏布局，其中左侧是侧边栏，右侧则是文章列表和文章内容。使用了 Grid 布局来实现，通过 grid-template-columns 和 grid-template-rows 属性来定义网格布局，通过 repeat(auto-fit, minmax(300px, 1fr)) 实现自适应布局，即网格自动填充容器，每个网格的最小宽度为 300 像素，最大宽度为 1 个网格</p>
</section>
</main>
<footer class="footer">
<p>© 2023 My Blog. All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
