图文并茂!为你展示Grid布局

css grid布局

定义行高列宽

grid-template-rows:50px 50px 50px 定义网格三行行高,绝对单位方式

grid-template-columns:30% 30% 30% 定义网格三列列宽,百分比方式

在这里插入图片描述


定义行列间距

row-gap:15px 设置行间距

column-gap:15px 设置列间距

简写形式:gap: <row-gap> <column-gap>;

在这里插入图片描述


按区域划分网格

<div class="grid-border grid-container" style="display:grid;grid-template-areas:'header header header' 'main main side' 'footer footer footer';">
    <div class="grid-border grid-item grid-color-1" style="grid-area: header">header</div>
    <div class="grid-border grid-item grid-color-2" style="grid-area: main">main</div>
    <div class="grid-border grid-item grid-color-3" style="grid-area: side">side</div>
    <div class="grid-border grid-item grid-color-4" style="grid-area: footer">footer</div>
</div>

在这里插入图片描述


自动创建网格行列

<div class="grid-border grid-container" style="display:grid;grid-auto-rows:50px;grid-auto-columns:50px;">
    <div class="grid-border grid-item grid-color-1" style="grid-row-start:1;grid-column-start:1">1</div>
    <div class="grid-border grid-item grid-color-2" style="grid-row-start:2;grid-column-start:2">2</div>
    <div class="grid-border grid-item grid-color-3" style="grid-row-start:3;grid-column-start:3">3</div>
</div>

在这里插入图片描述


定义网格线

指定网格线名称

3x3的网格布局会有4条水平网格线和4条垂直网格线

可以使用方括号为每条网格线命名 grid-template-rows:[r1] 50px [r2] 50px [r3] 50px [r4]

网格布局允许同一根网格线有多个名字,比如:[fifth-line row-5]

根据网格线指定子项目位置

grid-row-start:1 指定子项目上边框所在的水平网格线

grid-row-end:3 指定子项目下边框所在的水平网格线

grid-column-start:1 指定子项目左边框所在的垂直网格线

grid-column-end:3 指定子项目右边框所在的垂直网格线

在这里插入图片描述

根据网格线指定子项目位置简写形式

简写形式:grid-row: <grid-row-start> / <grid-row-end>;

简写形式:grid-column: <grid-column-start> / <grid-column-end>;

简写形式:grid-area: <row-start> / <column-start> / <row-end> / <column-end>;


定义排列规则

行优先或列优先

采用“稀疏”堆积,所有元素按照次序出现,即使前面元素留下空白也永远不会倒回去填补空白

grid-auto-flow:row 先放置行,后放置列

grid-auto-flow:column 先放置列,后放置行

在这里插入图片描述

行密集或列密集

采用“稠密”堆积,后面如果出现的稍小元素会填充前面稍大元素留下的空白,可能会打乱次序

grid-auto-flow:row dense 先占满行

grid-auto-flow:column dense 先占满列

在这里插入图片描述


使用关键字和函数

自动填充:auto-fill

grid-template-columns:repeat(auto-fill, 100px)

适用于单元格大小确定但是容器大小不确定的情况

如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充

在这里插入图片描述

按比例分割:fr

grid-template-columns:100px 1fr 2fr

使用 fr 关键字(fraction的缩写,意为“片段”),表示比例关系

如果两列宽度分别是1fr和2fr,表示后者是前者的两倍

在这里插入图片描述

自适应:auto

grid-template-columns:100px auto 100px

auto 关键字表示由浏览器自动决定单元格的行高或列宽,基本上等于该列单元格的最大宽度
在这里插入图片描述

简化重复:repeat()

repeat()函数接收两个参数:① 重复的次数;② 重复的值

grid-template-columns:repeat(2, 20px 30px); === grid-template-columns: 20px 30px 20px 30px;
grid-template-rows:repeat(2, 50%); === grid-template-rows:50% 50%;

在这里插入图片描述

限定长度:minmax()

minmax()函数接收两个参数:① 最小值;② 最大值

grid-template-columns:1fr 2fr minmax(100px, 1fr) 表示第三列宽最小100px,最大1fr

在这里插入图片描述


定义容器的对齐方式

水平方向:justify-content

justify-content:start 对齐容器的左边框

在这里插入图片描述

justify-content:end 对齐容器的右边框

在这里插入图片描述

justify-content:center 在容器水平居中

在这里插入图片描述

justify-content:stretch 项目大小没有指定,拉伸占据整个网格容器,必须存在 auto 属性的行或列

在这里插入图片描述

justify-content:space-around 每个列项目两侧间隔相等。列项目之间的间隔比列项目与容器边框的间隔大一倍

在这里插入图片描述

justify-content:space-between 列项目与列项目的间隔相等,列项目与容器边框之间没有间隔

在这里插入图片描述

justify-content:space-evenly 列项目与列项目的间隔相等,列项目与容器边框之间也是同样长度的间隔
在这里插入图片描述

垂直方向:align-content

align-content:start 对齐容器的上沿边框

在这里插入图片描述

align-content:end 对齐容器的下沿边框

在这里插入图片描述

align-content:center 在容器垂直居中

在这里插入图片描述

align-content:stretch 行项目大小没有指定,拉伸占据整个网格容器,必须存在 auto 属性的行或列

在这里插入图片描述

align-content:space-around 每个行项目两侧的间隔相等。行项目之间的间隔比行项目与容器边框的间隔大一倍

在这里插入图片描述

align-content:space-between 行项目与行项目的间隔相等,行项目与容器边框之间没有间隔

在这里插入图片描述

align-content:space-evenly 行项目与行项目的间隔相等,行项目与容器边框之间也是同样长度的间隔

在这里插入图片描述

简写形式:place-content

简写形式:place-content: <align-content> <justify-content>;


定义所有子项目的对齐方式

水平方向:justify-items

justify-items:start 所有子项目左对齐

justify-items:center 所有子项目居中对齐

justify-items:end 所有子项目右对齐

justify-items:stretch 所有子项目自动拉伸

在这里插入图片描述

垂直方向:align-items

align-items:start 所有子项目与上沿对齐

align-items:center 所有子项目与中心对齐

align-items:end 所有子项目与下沿对齐

align-items:stretch 所有子项目自动拉伸

在这里插入图片描述

简写形式:place-items

简写形式:place-items: <align-items> <justify-items>;


定义单个子项目的对齐方式

水平方向:justify-self

justify-self:start 指定单个子项目左对齐

justify-self:center 指定单个子项目水平居中

justify-self:end 指定单个子项目右对齐

justify-self:stretch 指定单个子项目自动拉伸

在这里插入图片描述

垂直方向:align-self

align-self:start 指定单个子项目与上沿对齐

align-self:center 指定单个子项目垂直居中

align-self:end 指定单个子项目与下沿对齐

align-self:stretch 指定单个子项目自动拉伸

在这里插入图片描述

简写形式:place-self

简写形式:place-self: <align-self> <justify-self>;

参考链接

Grid网格布局教程

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页