Grid布局详解

最新推荐文章于 2024-06-15 14:18:12 发布

哈哈成

最新推荐文章于 2024-06-15 14:18:12 发布

阅读量345

点赞数 5

文章标签：前端 css3

本文链接：https://blog.csdn.net/m0_60838883/article/details/136623175

版权

本文详细介绍了CSSGrid布局的各个方面，包括如何设置行和列的尺寸，重复、等分、限制元素大小，使用网格线定位元素，以及自适应列数和区域定义。通过实例演示了如何灵活运用这些特性实现复杂布局。

摘要由CSDN通过智能技术生成

Grid布局详解
概论
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局
指令

<!--  使元素变为grid容器  -->
1、display:grid            
<!--  设置行每个元素的宽度  -->
2、grid-template-rows: **  **  ** ;
<!-- 设置列每个元素的宽度 -->
3、grid-template-columns: ** ** ** ;

例：实现如下图九宫格
在这里插入图片描述

代码如下

article{
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
} 
div{
  line-height: 100px;
  background-color: skyblue;
  text-align: center;
  border: 1px dashed red;
}

<body>
  <article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </article>
</body>

1、如上述中 grid-template-rows: 100px 100px 100px;如果在实际中涉及到比较大的重复量，这样的写法过于繁琐，可以使用repeat方法，如下：

grid-template-columns: repeat(3, 100px); //意思为重复100px 三次  
grid-template-rows: repeat(3, 100px);

与之前的grid-template-rows: 100px 100px 100px效果一致
2、也可以使用fr关键字，对等分元素进行填充

grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

3、使用minmax方法对元素的宽高进行限制

grid-template-rows: repeat(2, minmax(50px,100px));

在这里插入图片描述

4、将元素放入grid容器中
首先了解grid中的网格线概念：划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。
在这里插入图片描述

以想要放入的元素的左和上为参照，对应grid不同的网格线行数和列数
将元素放到想要的方式可以使用如下的方法

 div:first-child{
/*    从grid栅格 行 第一根开始 */
            grid-row-start: 1;
/*    从grid栅格 列 第一根开始 */
            grid-column-start: 1;
/*    以grid栅格 行 第二根结束 */
            grid-row-end:2 ;
/*    以grid栅格 列 第四根结束 */
            grid-column-end: 4;
        }

效果如下
在这里插入图片描述

5、在grid容器中，我们可以使用一下命令对grid栅格的宽高、名字、进行控制

/* 对栅格的宽度做出控制 */
 article {
row-gap: 10px;
column-gap: 10px;
 }
/* 效果如下 */

对网格线命名

article {
grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr;
}

6、auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，例如左边是宽度不固定的容器，右边是三列的grid网格，如果左边的容器宽度变小，右边的列在保持每列宽的情况下，增加列的数量，案例如下：
在这里插入图片描述

7、auto关键字：表示浏览器决定其宽度，

.wrapper-5 {
  display: grid;
/*   第一列和第三列宽度固定，中间列宽度随浏览器大小缩放 */
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

8、grid-template-areas 属性，grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成，一般这个属性跟网格元素的 grid-area 一起使用。grid-area 属性指定项目放在哪一个区域

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
 /*   六个容器，俩行三列 */
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中
在这里插入图片描述

哈哈成

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Grid布局详解

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。8、grid-template-areas 属性，grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成，一般这个属性跟网格元素的 grid-area 一起使用。5、在grid容器中，我们可以使用一下命令对grid栅格的宽高、名字、进行控制。例：实现如下图九宫格。
复制链接

扫一扫