Grid 布局笔记

pxx_du

已于 2024-07-03 17:16:08 修改

阅读量678

点赞数 4

分类专栏： css 文章标签： css css3

于 2021-10-14 20:43:01 首次发布

本文链接：https://blog.csdn.net/pxx_du/article/details/120770749

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS Grid布局的使用，包括设置行高列宽、自动填充、项目间距、布局流向控制以及对齐方式。通过实例展示了如何创建响应式网格，并探讨了fr单位的应用。同时，还讲解了如何自定义项目大小和位置，帮助开发者更好地理解和掌握CSS Grid布局技巧。

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

触发Grid条件

display: grid;

1.设置行高列宽

grid-template-rows:100px 100px 100px; （分三行，每行高100px）

grid-template-columns:100px 100px 100px;（分三列，每行高100px）

可简写为：

grid-template-rows: repeat(3,100px );

grid-template-columns: repeat(3,100px );

行的高度、列的宽度可用百分比。

grid-template-columns: repeat(X,Y...... );

宽或高可以写多个，则以一组为循环，循环X次。

2.自动填充

行：grid-template-rows: repeat(auto-fill,100px); （设置grid的行 auto-fill自动填充）

列：grid-template-columns: repeat(auto-fill,Y.....) ;

（设置grid的列后面有几个值就表示有几列，每一个值表示列的宽度。）

以Y宽度或多个宽度为循环，每个项目填充循环

3.项目之间的间距

gap: X Y; (X为行之间的间距，Y为列之间的间距)

4.选择“行”或“列”的优先铺满

grid-auto-flow: row;

默认，项目的平铺顺序是先行后列的。即先填满第一行，然后换行，填第二行。

grid-auto-flow:column;

更改方向： column 先列后行。

5.容器对齐方式

justify-content:center;
align-content: center;

justify-content 和 align-content默认值都为 flex-start或start（end同理）

其用法同弹性盒子

容器：600*600 项目：100*100

6.项目对齐方式

justify-items:enter;
align-items:center;

justify-itemst 和 align-items 默认值都为 flex-start或start（end同理）

容器：600*600 项目双类名： 200*200 100*100（100相对与200实现对齐）

7.fr

fr 片段将整体分为n分，1fr = 整体的1/n

display:grid;
grid-template-rows:100px 2fr 1fr;
grid-template-columns:repeat(3,100px);
justify-content:center;
align-content:center;

容器：600*600 此中fr=（600-100）/3

8.自定义项目

    .item1{
      background-color: rgb(150, 36, 36);
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }