css网格布局中auto-fill与auto-fit的不同点

css grid 布局中 我们不仅可以明确列的大小,也可以通过repeat 来重复填充子项。具体的来说,我们可以指定网格中需要多少列,然后让浏览器来处理响应性。不需要写媒体查询,我们就能够在较小的视口尺寸下显示较小的列,在较宽的屏幕空间中显示更多的列。

只需要一行css就能够做大这一点。这种神奇的、无需媒体查询的响应能力是通过repeat()函数和自动定位关键词实现的。

总而言之,repeat()函数允许我们根据需要重复列的次数。假如,我们需要创建一个12列的网格,我们可以写下面的代码。

.grid {
   display: grid;
  /* define the number of grid columns */
  grid-template-columns: repeat(12, 1fr);
}
这行代码的目的时候,将空间平均的分为12列,每列的宽度均等。每列的宽度会随空间的大小而变化。如果视口宽度比较少的话,那么列就会变的特别小。怎么解决这个问题呢。这个时候可以使用minmax()这个函数,来解决这个问题。
如下面代码所示
grid-template-columns:repeat(12, minmax(200px, 1fr));
这样我们保证了每列在小视口宽度的时候,最小宽度有200px,但是这样会导致一个问题,由于列数为12列,那么每行的知识长度有2400px,这样在视口宽度小的屏幕会导致溢出屏幕。如下视频所示:

阅读 “css网格布局中auto-fill与auto-fit的不同点” 发表评论

网格布局完全指南

网格布局

这个是css网格布局的完全指南,涉及到网格布局的父元素属性说明,以及网格布局的子元素属性说明。

内容列表

1.网格布局介绍

2.网格布局基础知识与浏览器支持

3.网络布局中的重要术语

4.Gird属性

5.网格布局特有单位和函数

6.流式Columns Snippet

7.动画

网格布局介绍

css 网络布局也就是Grid 或css grid ,它是一个二维的布局系统,完全改变了我们过去的布局方式。css是用来布局我们的web页面,但是它有很多做到不到位的地方。最初,我们使用table ,然后是float position 还有inline-block,但是这些方法基本上是hack方式做到的,此外还不支持很多重要功能(如垂直居中)Flexbox是个很强的布局工具,但是它只是一个一维的布局方案。Grid是第一个专门为解决布局问题而创建的CSS模块,在它之前我们做网站的过程中,我们一直在用hack手段解决这些问题。在这片文章里,我不会去讲grid之前版本的相关属性。

网格布局的基础知识与浏览器支持

2017年初,几乎所有的浏览器都支持不带浏览器前缀的grid布局模型,像Chrome,Firefox Oprea 以及Safari 和IE10等,但是这个grid语法的一个过渡版本。现在gird最新属性已经发生变化了,是时候写一份新版的grid布局的指南了。

为了使网格布局开始工作,我们需要利用display:grid 这个样式将一个元素作为网格布局的容器。利用 gird-template-columnsgrid-template-rows来设置行与列的尺寸,然后使用gird-columngrid-row将子元素放入网格中。这个与flexbox布局很相似,每个gird 子项的位置并不重要。我们可以使用的CSS属性按任何顺序放置它们,这样用媒体查询重新安排的网格布局变得非常容易。我们可以想象一下,定义整个页面的布局,然后完全重新排列以适应不同的屏幕宽度,只需几行CSS即可。网格是有史以来最强大的CSS模块之一。

下面的图片是从Caniuse中获取的数据,Caniuse中能够查询到各个浏览器对gird支持更详细的数据。

Desktop支持

pc浏览器支持情况

Mobile/Tablet 支持

移动端浏览器支持情况
阅读 “网格布局完全指南” 发表评论