CSS布局-grid布局与-响应式布局

容器属性（Container Properties）：

display: 指定网格容器的显示类型，可以设置为 grid 或 inline-grid。
grid-template-rows: 定义网格的行大小，可以使用长度单位（如像素）或百分比，也可以使用自动调整的关键字（如 fr）。
grid-template-columns: 定义网格的列大小，使用方式同上。
grid-template-areas: 使用命名的网格区域来定义网格布局，通过指定区域名称来安排网格项的位置。
grid-template: 缩写形式，同时定义 grid-template-rows、grid-template-columns 和 grid-template-areas。
grid-row-gap: 定义网格行之间的间距。
grid-column-gap: 定义网格列之间的间距。
grid-gap: 缩写形式，同时定义 grid-row-gap 和 grid-column-gap

项目属性（Item Properties）：

grid-row-start: 定义项目开始的行位置。
grid-row-end: 定义项目结束的行位置。
grid-column-start: 定义项目开始的列位置。
grid-column-end: 定义项目结束的列位置。
grid-row: 缩写形式，同时定义 grid-row-start 和 grid-row-end。
grid-column: 缩写形式，同时定义 grid-column-start 和 grid-column-end。
grid-area: 定义项目的网格区域，缩写形式，同时定义 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。
justify-self: 定义项目在单元格内的水平对齐方式。
align-self: 定义项目在单元格内的垂直对齐方式。
place-self: 缩写形式，同时定义 justify-self 和 align-self。

网格行和列属性（Grid Line and Track Properties）：

grid-auto-rows: 定义自动生成的网格行的大小。
grid-auto-columns: 定义自动生成的网格列的大小。
grid-auto-flow: 控制自动生成的项目如何填充网格，可以设置为 row、column 或 dense。

当涉及到CSS Grid布局的完整代码时，需要提供HTML和CSS两个部分。以下是一个示例，展示了如何使用CSS Grid布局创建一个简单的网格化布局

HTML部分代码：

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
</div>

CSS部分代码： 

.container{