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

最新推荐文章于 2024-04-07 10:46:03 发布

立马精神了

最新推荐文章于 2024-04-07 10:46:03 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/Guo_XiCheng/article/details/109312641

本文详细介绍了 CSS Grid 布局的基础概念和技术要点，包括如何定义行高列宽、行列间距、网格线和子项目的位置等。此外还探讨了如何通过关键字和函数来自动填充、按比例分割及自适应布局，以及如何定义容器和子项目的对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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%;