grid布局阮一峰（grid 布局）

看了阮一峰的grid教程，做一个笔记，主要自己看，有理解错误的地方后续更正，有新的理解后续补充。教程链接如下：

CSS Grid 网格布局教程 - 阮一峰的网络日志

grid主要分为容器属性和项目的属性，在行列布局（比如九宫格）这种具有二维特征的布局中还是挺好用的。

下面是笔记内容。

意义：定义布局的行和列，

1、可以指定具体的px(可以用repeat函数简化。【 repeat(num重复次数，fr重复数据) 】)。

2、也可以是百分比。

3、也可以是fr(表示片段，对容器的剩余可用空间(去除gap等)分比例，反正fr不会超出容器，而百分比则可能超出容器)。

关键字：auto-fill和auto-fit 。

在简单使用时，auto-fill和auto-fit差别不达，要查看他们的区别需要和minmax结合使用。

下面先看auto-fill的简单使用。

auto-fill简单使用：

比如容器宽300px，但是grid-template-columns值定义了 repeat(auto-fill, 80px) ,这样会尽可能多的容下宽80px的列。

最终这个容器有多少列，不是像上一节那样写死的，而是计算出来的。

比如下图每列是80px，最多容下3*80=240px < width:300px，所以是3列。

区别

前提：要看出区别，repeat时的重复数据就不能是固定的值，需要结合minmax来使用，比如设置为： grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

1、在剩余空间不足时，auto-fit和auto-fill没啥区别，他们都会以最小的宽来放下更多的项目，效果图如下：

2、在剩余空间充足的情况，区别就显现了。auto-fill【足够..的量】会判断剩余空间，如果剩余空间还够放下一个和前面等宽的项目（即使是空白的项目），则会用这写空白项目和已有的真实项目一起来平分剩余空间；

而auto-fit【适合、合身】则不会方空白的项目，直接是已有的真实项目来平分剩余空间。（这更符合常识）

效果图如下：

测试代码如下：

产生一个范围，如下为：大于100ox小于1fr的值

属性和属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。【哈，感觉没啥用】

grid-gap：<grid-row-gap grid-column-gap> 的合并

省略第二个值默认取第一个的值，后面两个值的都是这样取值。

需要和每个项目的grid-area属性相结合使用，

每项默认按照“先行后列” 顺序填充,值为row，可以改为column后“先列后行”。

column的情况如下：

其他值

除了row和column两个值，还有设置row-dense和column-dense（dense:密集的），他们两个的意思尽可能填满，不要出现空格。

本来3会在4的，但是设置需要row dense就需要把行填满，刚好位置也够，所以3会上去。

row的效果

row-dense的效果：

justify-item设置单格内容的左右对齐，align-item是单格内容的上下对齐，place-item是align-item和justify-item的简写。

同样justify-content是水平、align-content是垂直方向，place-content是align-content+justify-content的简写.

有时候项目只有3列，但是某个项目指定到第5列，如果不用这两个属性设置额外的单格大小，则会根据这个单格的内容来。

【我测下来，rows是有用，但是column好像因为指定了grid-template-columns，grid-auto-columns的值会等于grid-template-columns。后续用到了再探究。】

grid-column是 grid-column-start / grid-column-end 的简写，start和end用斜线分割。

grid-row 是grid-row-start / grid-row-end的简写

我们还可以用span 关键字来表示跨越

可以看做上面的简写。

这样1就位于e的位置:

除了用区域名字，还可以用行列下标的方式指定位置并扩展，用斜线分割：

place-self=<align-self justify-self>

今天的文章 grid布局阮一峰（grid 布局）分享到此就结束了，感谢您的阅读。

grid布局阮一峰（grid 布局）

auto-fill简单使用：

区别

其他值

相关推荐