CSS Grid 是最新的布局方式，可以方便地实现网站布局。与传统的 float、position 以及 flexbox 等布局方式不同的是，CSS Grid 是一个二维布局系统，可以在行、列两个方向上自由布局。
在实际应用中，我们有时需要实现一些流式的布局设计，以适应不同屏幕尺寸的显示效果。CSS Grid 提供了许多技巧来实现这一目的，本文将详细介绍 CSS Grid 的流式布局设计技巧，并提供示例代码供参考。
1. 自适应布局
自适应布局是指布局可以根据屏幕尺寸自动调整，不会出现水平滚动条的情况。CSS Grid 的自适应布局可以通过以下两种方式实现。
1.1. minmax() 函数
minmax() 函数可以指定一个最小值和一个最大值，自适应布局时将根据这两个值动态调整元素大小。可以将 minmax() 函数应用在网格中，以实现自适应的布局效果。
---------------------- ---------------- ------------- ------
上面的代码中，auto-fit 属性将列数根据容器宽度自动调整到最合适的数量，minmax(200px，1fr) 指定每列的最小宽度为 200px，最大宽度为 1fr （即分配剩余空间，以实现自适应效果）。
1.2. repeat() 函数
repeat() 函数可以定义重复的单元格网格线的数量，可用于实现自适应布局。通过 repeat() 函数设置最小单元格屏幕宽度，在大屏幕的情况下将单元格最大化。当屏幕尺寸更小时，重复单元格的数量会增加，从而适应较小尺寸的屏幕。
---------------------- ---------------- ------------- ------
2. 瀑布流布局
瀑布流布局是指元素沿着一定规则排列布局，通常用于显示图片或文章。CSS Grid 可以方便地实现瀑布流布局，以适应不同屏幕尺寸的需求。以下代码展示如何实现瀑布流布局。
---- -------------
---- ------------ -------------------- ---- ----
---- -
------
---- -------------
---- -
------
---- -------------
---- -
------
---- ------------ ------------------------- -- ------------- ---- ----
---- -
------
---- -------------
---- -
------
---- ------------ -------------------- ---- ----
---- -
------
---- -------------
---- -
------
---- -------------
---- -
------
---- ------------ ------------------------- -- ------------- ---- ----
---- -
------
---- -------------
---- --
------
------上面代码中，grid-row-end 和 grid-column-start 属性设置单元格结束和开始的位置。span 属性列出了网格单元格应该跨越的行数或列数。通过这些属性，我们可以有效地控制单元格的布局位置，从而实现瀑布流布局。
3. 响应式布局
响应式布局是指确保网站在不同屏幕尺寸下都能够正常显示。通过使用 CSS Grid，可以轻松实现响应式网站布局。可以使用 media query 媒体查询样式规则来为不同屏幕宽度定义不同的网格布局。
------ ------ --- ----------- ------ -
----- -
---------------------- --------- -----
-
-
------ ------ --- ----------- ------ -
----- -
---------------------- --------- -----
-
-
------ ------ --- ----------- ------ -
----- -
---------------------- --------- -----
-
-上面的代码中，使用不同的 media query 媒体查询分别设置不同尺寸下的网格布局，以实现响应式效果。在上述代码中，对屏幕尺寸分别设置了 3、4 和 2 列。
结论
本文介绍了 CSS Grid 的流式布局设计技巧。通过使用 minmax()、repeat()、瀑布流布局和响应式布局，我们可以实现自适应、灵活的网站布局效果，帮助我们更好地适应不同屏幕尺寸的网站设计需求。
示例代码：https://codepen.io/johnsmith/pen/XWmQYBz
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67316f460bc820c58238ce51