在 CSS 中，使用 grid 和 flexbox 可以轻松地创建复杂的多列布局。
使用 grid 布局时，需要使用父容器的 display: grid 属性来创建一个网格容器。然后，使用 grid-template-columns 属性来定义列的数量、宽度和间距。例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}上述代码将创建一个包含三列的网格容器，每列的宽度为相等的 1fr，并且它们之间的间距为 20px。
使用 flexbox 布局时，需要使用父容器的 display: flex 属性来创建一个弹性容器。然后，使用 flex-basis 属性来定义每个子元素的基础宽度。例如：
.container {
display: flex;
}
.item {
flex-basis: 33.33%;
margin-right: 20px;
}上述代码将创建一个包含三个子元素的弹性容器，每个子元素的基础宽度为 33.33%，并且它们之间的右侧间距为 20px。
需要注意的是，在使用 grid 和 flexbox 布局时，可以通过使用媒体查询来实现响应式布局。例如：
@media screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
.item {
flex-basis: 50%;
}
}上述代码将在屏幕宽度小于 768px 时，将网格容器的列数更改为两列，每个子元素的基础宽度更改为 50%。
总之，使用 grid 和 flexbox 布局可以非常方便地创建复杂的多列布局，并且可以使用媒体查询实现响应式布局。