具有最小尺寸的最大列的自动填充CSS网格

Drupal 10推出了一种新颖的自动填充CSS网格技术，我们很高兴分享它。

关键功能是：

• 可自定义的最大列计数，定义网格的默认状态。
• 动态列调整：如果网格单元格低于指定的最小宽度，则网格会自动减少列计数。
• 全宽度利用率：网格单元始终扩展以填充容器的宽度，而不论列号如何。
• 无JavaScript，响应式设计：无JavaScript的各种视口尺寸工作。

动作自动填充网格

观察网格在其左侧被拖动元件压缩时的响应方式。

代码

准备实施了吗？这是CSS：

 .Grid-Container {
  / *用户定义的值 */
   - 格里德 - 延伸间隙：10px;
   - 格里德 - 列计数：4;
   -  grid-item-宽宽：100px;

  / *计算值 */
   - 间隙计数：calc（var（ - 网格 - 列计数） -  1）;
   - 按钮间隙宽度：calc（var（ -  gap-count） * var（ - 网格 -  layout-gap））;
   -  grid-item-最大宽度：calc（（（100％ -  var（ - 总差距））） / var（ - 网格 - 列计数））;

  显示：网格；
  网格 - 板柱：重复（自动填充，minmax（max（var（-grid-item-min-width）），var（ - 网格 -  iTem-max-width）），1fr））;
  网格差距：var（ - 网格 - 图形差距）;
}

了解自动填充网格

此代码利用现代CSS功能：CSS Grid的repeat() ， auto-fill()和minmax()函数以及max()和calc() 。

auto-fill()解释了

auto-fill()对于用列动态填充行至关重要。要深入了解auto-fill() ves auto-fit() ，请参见Sara Soueidan的出色文章和随附的视频。

使用max()管理列限制

max()函数可防止过多的列。它确保每个网格单元的宽度不会超过计算的百分比，同时保持最小宽度。计算说明网格空白：

 Max（计算（25％ - <grid-gap-for-one-cell>），100px）</grid-gap-for-one-cell>

这是使用CSS变量实现的：

 - 间隙计数：calc（var（ - 网格 - 列计数） -  1）;
 - 按钮间隙宽度：calc（var（ -  gap-count） * var（ - 网格 -  layout-gap））;
 -  grid-item-最大宽度：calc（（（100％ -  var（ - 总差距））） / var（ - 网格 - 列计数））;

考虑到列和间隙的数量，这会动态计算最大宽度。

用minmax()确保全宽度

minmax()保证网格单元总是伸展以填充容器宽度。如果空间允许，它将设置最小宽度，并允许扩展到1fr （分数单位）：

 minmax（<grid-item-width> ，1FR）</grid-item-width>

完整的解决方案

结合了这些元素，最终代码实现了所需的自动填充行为：

 - 间隙计数：calc（var（ - 网格 - 列计数） -  1）;
 - 按钮间隙宽度：calc（var（ -  gap-count） * var（ - 网格 -  layout-gap））;
 -  grid-item-最大宽度：calc（（（100％ -  var（ - 总差距））） / var（ - 网格 - 列计数））;

网格 - 板柱：重复（自动填充，minmax（max（var（-grid-item-min-width）），var（ - 网格 -  iTem-max-width）），1fr））;

CSS的力量

此示例展示了现代CSS的高级功能。我们创建了一个没有JavaScript的复杂布局，证明了CSS的演变。

感谢Andy Blum建议使用auto-fill() ，并感谢CSS规格作者和实施者使这一行为成为可能。

以上是具有最小尺寸的最大列的自动填充CSS网格的详细内容。更多信息请关注PHP中文网其他相关文章！