类似于flexbox的'只需连续将元素放入CSS网格

有时，我们只需使用Flexbox即可连续将项目与间距排列。虽然带有gap的Flexbox仍然是一个方便的解决方案，但值得记住的是，CSS网格提供了类似的功能。

考虑此示例：

 。网格 {
  显示：网格；
  差距：1REM；
  网格 - 自动流：列；
}

这些物品看起来同样宽，但没有内容，但由于内容，它们会根据其自然宽度进行调整。要获得更多控制，请在网格项目上使用width ， min-width ， max-width ，或定义具有repeat(auto-fit, minmax(min-content, 1fr))的grid-template-columns ，以允许最小内容宽度确定列宽度。

 。网格 {
  显示：网格；
  差距：1REM；
  网格 - 自动流：列；
  网格板柱：重复（自动拟合，minmax（min-content，1fr））;
}

灵活的网格非常强大。

最后，如果您需要网格仅占据其内容的宽度（小于100％，甚至是auto ），请记住该display: inline-grid;是一种选择。

以上是类似于flexbox的'只需连续将元素放入CSS网格的详细内容。更多信息请关注PHP中文网其他相关文章！