CSS Grid 网格布局

最新推荐文章于 2024-06-13 08:39:52 发布

来自夏季的雨

最新推荐文章于 2024-06-13 08:39:52 发布

阅读量142

点赞数

分类专栏：前端编程文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46370422/article/details/104591562

版权

一、网格布局的作用

适合用于二维布局，可以创建任何行列的布局

二、CSS 中网格布局相关属性

表示方法：display:grid;

1、作用在容器上的属性：

    display : grid
    ⑴ grid-template-columns : 设置列数
    ⑵grid-template-rows : 设置行数       
	网格中提供了一个新的单位：fr ( 比例单位 )，表示将当前容器分成多少份。
		
	注：在布局网格大小都相同时，可以使用repeat()方法：       
	例：
	grid-template-columns：repeat(3,1fr)
	![网格样式](https://img-blog.csdnimg.cn/20200301143029748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM3MDQyMg==,size_16,color_FFFFFF,t_70)
	
    ⑶grid-template-areas : 划分区域的
    注：区域必须是矩形。
    例：
    **想要得到的样式**
    ![想要的样式](https://img-blog.csdnimg.cn/20200301150301358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM3MDQyMg==,size_16,color_FFFFFF,t_70)
    **做法**

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
   width: 300px;height: 300px;border: 1px red solid;display:grid;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:100px 100px 100px;
        grid-template-areas:
        "a1 a1 a2"
        "a3 a3 a2"
        "a4 a4 a2";}
        #box div:nth-of-type(1){
   background-color: blue;grid-area:a1;}
        #box div:nth-of-type(2){
   background-color: red;grid-area: a2;}
        #box div:nth-of-type(3){
   background-color: green;grid-area: a3;}
        #box div:nth-of-type(4){
   background-color: pink;grid-area: a4;}
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
注：在给网格做好后，不能再单独给每一个网格设定大小；若想实现的网格行或者列的大小不一样，应该在设定网格时设置

⑷复合样式    grid-template:
       	 	grid-template-rows
        	grid-template-columns
       		grid-template-areas
       		
⑸ grid-column-gap : 列的间距
    grid-row-gap : 行的间距
    grid-gap : 复合写法
        grid-row-gap   grid-column-gap
⑹justify-items : 子项的水平居中方式
        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start   开始处
        center   中间
        end    结束处

 ⑺ align-items : 子项的垂直居中方式
        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start
        center
        end
    place-items : 复合写法
        align-items justify-items
	justify-content : 整体网格的水平对齐方式
         默认：stretch
         start
         end
         center
         space-between
         space-around
         space-evenly

    align-content : 整体网格的垂直对齐方式
        默认：stretch
         start
         end
         center
         space-between
         space-around
         space-evenly

    place-content : 复合写法
        align-content justify-content

2、作用在子项上

 ⑴grid-area : 找指定的区域
        1.对应网格的名字
        2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4; 
            grid-row-start / grid-column-start / grid-row-end / grid-column-end

    grid-column-start  水平方向上占据的起始位置
    grid-column-end    水平方向上占据的结束位置
    grid-row-start     垂直方向上占据的起始位置
    grid-row-end       垂直方向上占据的结束位置
        注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。 
            正常数字是位置，加上span是个数。

    grid-column:3 / 4;
        表示grid-column-start / grid-column-end
    grid-row:1 / span 2;
         表示grid-row-start / grid-row-end

三、网格实战

实现页面：https://www.jean-georges.com/（打开有点慢，请耐心等待）
CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font1/iconfont.css">
    <script src="./font1/iconfont.js"></script>
    <style>
        *{
   margin:0;padding: 0;}
        a{
   text-decoration: none;color: #445163;}

        
        .icon{
   width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
        html{
   width:100%;height: 100%;}
        body{
   width:100%;height: 100%

最低0.47元/天解锁文章

来自夏季的雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Grid 网格布局

一、网格布局的作用适合用于二维布局，可以创建任何行列的布局二、CSS 中网格布局相关属性表示方法：display:grid;1、作用在容器上的属性： display : grid ⑴ grid-template-columns : 设置列数 ⑵grid-template-rows : 设置行数网格中提供了一个新的单位：fr ( 比例单位 )，表...
复制链接

扫一扫