
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的不同点” itemprop="discussionURL"2 个评论