网页自适应布局-grid篇

Grid布局

display：grid 指定一个容器采用栅格布局。
容器元素是块级元素，采用栅格布局，我们也可以使容器为行内元素且采用栅格布局——display：line-grid

grid-template-columns属性

一行代码解决响应式布局，简单容易上手。

grid-template-columns: 
repeat(auto-fit, minmax(100px, 1fr));

响应单位fr

fr允许你根据需要将容器，拆分为多个块。
比例关系显示列宽度或者行高度的方法，可以有效的利用容器的空间(不浪费一点空间)。

grid-template-columns: 100px 100px 100px; 
改成 
grid-template-columns:1fr 1fr 1fr; 

结果就是将整个屏幕宽度width 均分为3份，
每一列（1个格子）都占一个fr单位。根据屏幕缩放自适应。

也可以和绝对长度的单位结合使用

grid-template-columns：100px 1fr 2rf ; 

容器宽度减去100px(设置了列间距，同样要减去所有列间距)，
剩余的宽度按照1: 2的比例分配

repeat()

当行列的数量到了一定的数量，重复书写同样的值会变得麻烦。

repeat(行/列的个数, 宽度/高度)
repeat(重复几次, 一个值/几个值(用空格隔开) ) ：重复这几个值几次

grid-template-columns：repeat(2, 20px 30px)；
等同于
grid-template-columns：20px 30px 20px 30px ；

auto

grid实现左中右布局，中间内容自适应

.box{
 	display:grid;
    grid-template-columns: 200px auto 200px;
}

<div class="box">
	<div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

auto-fill 与 auto-fit

fill: 平均分配(剩余空间 - 空轨道)
fit: 平均分配剩余空间给每个子元素

.box1 {
  background: #ffeaa7;
  /* 按照100px宽度创建尽量多的轨道，将(剩余空间 - 空轨道) 平均分配 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.box2 {
  background: #fab1a0;
  /* 按照100px宽度创建尽量多的轨道，将剩余空间 平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

auto-fill和auto-fit做的事情是一样的：

1.就是尽可能多的创建轨道

2.然后不足一个轨道的空间平均分配给已有的轨道

• auto-fill 的最后一步：保留空轨道留白，不会折叠空轨道

• auto-fit 的最后一步：折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道

总结：auto-fill和auto-fit一开始做的事情是一样的。就是尽可能的分配轨道数量，区别在于后面空轨道是否会折叠为0。auto-fill不折叠空轨道，auto-fit折叠空轨道。

minmax()

宽度固定时 右侧容易留白

grid-template-columns:
repeat(auto-fit,minmax(100px,1fr))

格子宽度限制为100px，但如果容器有多余的空间就会均分给每列，此时每列都是1fr。

响应图片 object-fit

图片的object-fit为cover，图片就会根据格子的大小来进行覆盖

div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

例子：自适应卡片展示

React: Jsx & Ant-Design Card模块

const {  Card  } = antd;
const { Meta } = Card;
const dataList = ['2015','2016','2017','2018','2019','2020','2021'];
ReactDOM.render(
  <div className="model-content">
    {dataList.map((item, index) => (<Card
      hoverable
    >
      <Meta title={item}
       description="Hello World" />
    </Card>))}
  </div>,
  mountNode,
);

CSS

.model-content {
        display: grid;
        grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
        grid-template-rows:repeat(auto-fill,minmax(160,160));
        grid-column-gap:10px;
        grid-row-gap:10px;
}

自适应效果：

例子：auto-fill auto-fit

当所有单元格（子元素）的总长度（width）
< 小于
当前容器长度（width）时