Grid布局--精简速成

最新推荐文章于 2024-04-25 15:05:42 发布

望眼欲穿i

最新推荐文章于 2024-04-25 15:05:42 发布

阅读量878

点赞数 1

分类专栏： HTML+CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_45775897/article/details/122276140

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、grid布局体验

<div class="grid">
        <span style="background-color: aqua;">1</span>
        <span style="background-color: rgb(105, 177, 38);">2</span>
        <span style="background-color: rgb(21, 32, 196);">3</span>
        <span style="background-color: rgb(204, 19, 195);">4</span>
        <span style="background-color: rgb(202, 22, 37);">5</span>
        <span style="background-color: rgb(255, 217, 0);">6</span>
    </div>

.grid{
            width: 150px;
            height: 300px;
            display: grid;
            text-align: center;
            background-color: antiquewhite;
        }
        span{
            line-height: 50px;
        }

运行结果：
在这里插入图片描述

二、布局父项常见属性

常见父项属性：

grid-template-columns:指定列数并设置每列宽度
row-gap：设置行间距
column-gap:设置列间距
gap：统一设置行列间距
align-items:设置块轴上的子元素排列方式(垂直方向)
align-content：设置对轨道的对其方式(垂直方向)
justify-content：设置对轨道的对其方式（水平方向）

在这里插入图片描述

1.grid-template-columns 指定列数并设置每列宽度

.grid{
            display: grid;
            grid-template-columns: 100px 100px 100px;
        }

运行结果：
在这里插入图片描述
用fr设置比例

.grid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

在这里插入图片描述

.grid{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
        }

运行结果：
在这里插入图片描述

2.row-gap，column-gap和gap 设置行列间距

.grid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 20px;
            row-gap: 20px;
        }

或者使用gap

.grid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
      }

运行结果：
在这里插入图片描述

3.align-items 设置块轴上的子元素排列方式(垂直方向)

属性值	说明
start	从上到下
end	从下到上
center	挤在一起居中（垂直居中）

.grid{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            align-items: center;
            column-gap: 20px;

运行截图：
在这里插入图片描述
end：

4.align-content 设置对轨道的对其方式(垂直方向)

属性值	说明
start	默认值从上到下
end	从下到上
center	垂直居中
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

.grid{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            align-content: space-between;
      }

在这里插入图片描述

5.justify- content 设置对轨道的对其方式（水平方向）

属性值	说明
start	从左到右
end	从右到左
center	水平居中
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

.grid{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            align-content: center;
            justify-content: center;
      }

在这里插入图片描述

三、常见布局应用

.grid{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            align-content: space-between;
            justify-content: space-between;
            gap: 20px;
            width: 340px;
            height: 120px;
            background-color: antiquewhite;
            text-align: center;
        }
        span{
            line-height: 50px;
            height: 50px;
        }

在这里插入图片描述
flex也加入了gap属性：效果和上图一样

.flex{
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            width: 340px;
            height: 120px;
            background-color: antiquewhite;
            text-align: center;
        }
        span{
            flex: 100px;
            line-height: 50px;
            height: 50px;
        }