【css】网格布局重要的6个属性

代码展示：

/* 独占一行布局 */
		grid-template-columns: 1fr;
		/* 一行两个布局 */
		grid-template-columns: 1fr 1fr;
		/* 自由布局 */
		grid-template-columns: 1fr 200px 1fr;
		/* 重复布局 */
		grid-template-columns: repeat(5, 1fr);
		/* 响应式布局 */
		grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
		/* 跨列跨行布局（这里应用于子元素） */
		grid-row: 1/3;
		grid-column: 1/3;

代码解释：

展示了多种使用CSS Grid Layout进行布局的方法，但请注意，grid-row 和 grid-column 属性应该被放置在具体的子元素上，而不是.boxes类本身，因为.boxes类通常被用来定义网格容器的样式，而grid-row和grid-column用于控制网格项（grid items）跨越的行和列。此外，你的注释与CSS属性直接混合在一起的方式在CSS文件中是不正确的；通常，你会为每个布局需求编写不同的CSS规则或类。

下面是针对你提到的6种基本且重要的网格布局样式的正确应用方式：

1. 独占一行布局

css.boxes-single-row {
display: grid;
grid-template-columns: 1fr;
}<