CSS Grid布局是Web前端常用的一种布局方案，它可以实现在网页中方便地布置界面元素。CSS Grid布局提供了两种布局方案，即横向布局和纵向布局，它们有着一些不同的特点和使用场景。
横向布局
横向布局适用于实现网页中的横向排列和网格状布局，可以实现等间距、自适应等多种效果。
实现等间距横向排列
通过设置网格容器display为grid，设置其中每个单元格的宽度为相同的值，再设置每个单元格之间的间距为相同的值即可实现等间距横向排列。示例代码如下：
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- --------- ----- --------- ----- - ------ ------ ----- -
实现自适应横向排列
在横向布局中，还可以通过设置每个单元格的宽度为百分比，使其实现自适应的横向排列。示例代码如下：
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ------ ------ ----- -
实现网格状布局
在横向布局中，还可以通过设置每个单元格的宽度不相等，并设置跨列或跨行来实现网格状布局。
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- --- ----- ---- ------------------- ----- - ------ ------ ----- ------- ----- - ------- ------------ - - -- -
纵向布局
纵向布局适用于实现网页中的纵向排列和等高布局，可以实现等高、居中等多种效果。
实现等高布局
通过设置每个单元格的高度为相同的值，即可实现等高布局。示例代码如下：
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- --------- ----- --------- ----- - ------ ------ ----- ------- ------ -
实现垂直居中
在纵向布局中，还可以通过设置垂直方向的间距和单元格的行数来实现垂直居中效果。示例代码如下：
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ------------ ------- --------- ----- - ------ ------ ----- ------- ------ -
实现响应式布局
在纵向布局中，还可以通过设置每个单元格的高度为百分比，使其实现响应式布局。示例代码如下：
-- -------------------- ---- ------- ----------- -------- ----- ---------------------- --------- ----- ------------------- ----------------- ------------- ------ ------------ ------- --------- ----- - ------ ------ ----- ------- ----- -
总结
CSS Grid布局提供了横向布局和纵向布局两种方案，它们都有着自己的特点和使用场景。在具体实现时，可以根据实际情况选择合适的布局方案，来实现所需要的效果。
注：以上示例代码仅供参考，具体实现可以根据实际情况进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ef57c968c7c53b0d575f6