当前位置:   article > 正文

Grid 布局 笔记_grid-template-rows铺满

grid-template-rows铺满

触发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.容器对齐方式 

  1. justify-content:center;
  2. align-content: center;

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

其用法同弹性盒子

容器:600*600   项目:100*100

 

6.项目对齐方式

  1. justify-items:enter;
  2. 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 

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

容器:600*600   此中fr=(600-100)/3

8.自定义项目 

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

 

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号