CSS 在CSS网格布局中为每列添加滚动条

在本文中，我们将介绍如何在CSS网格布局中为每列添加滚动条。CSS网格布局是一种强大且灵活的布局系统，它提供了一种将元素分割为网格的方式。但是，当网格中的内容超出了容器的大小时，会出现溢出问题。为了解决这个问题，我们可以为每列添加滚动条。

阅读更多：CSS 教程

使用CSS Grid布局

首先，让我们回顾一下CSS Grid布局的基础知识。CSS Grid布局通过将元素分割为行和列的网格，使我们能够创建复杂的布局。我们可以使用grid-template-columns属性定义网格的列数和宽度，使用grid-template-rows属性定义网格的行数和高度。

下面是一个简单的示例，展示了如何使用CSS Grid布局创建一个基本的三列布局：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

在这个示例中，我们使用grid-template-columns将容器分为三列，并使用repeat(3, 1fr)将每列的宽度设置为相等的分数。gap属性用于设置列之间的间距。

添加滚动条

为了给每列添加滚动条，我们需要使用CSS的一些特性。首先，我们需要将每列的内容放入一个单独的容器中。然后，我们可以使用overflow属性来控制容器的溢出行为。

下面是一个示例，展示了如何为每列添加滚动条：

<div class="container">
  <div class="column">
    <h2>Column 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
  <div class="column">
    <h2>Column 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.column {
  overflow: auto;
}

在这个示例中，我们为每列的内容添加了一个包装容器<div class="column">。然后，我们使用.column选择器将其样式设置为overflow: auto;。这将为每列创建一个可滚动的容器。

支持IE浏览器的解决方案

上述示例中的解决方案对于现代浏览器是有效的，但不幸的是，Internet Explorer浏览器不支持CSS Grid布局。为了兼容IE浏览器，我们可以使用Flexbox布局来创建类似的效果。

下面是一个使用Flexbox布局的示例：

<div class="container">
  <div class="column">
    <h2>Column 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
  <div class="column">
    <h2>Column 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum convallis massa, in tempor purus condimentum vel. Duis auctor pulvinar justo at tincidunt.</p>
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.column {
  width: calc(33.33% - 10px);
  overflow: auto;
}

在这个示例中，我们使用Flexbox布局来替代CSS Grid布局。.container选择器的样式被设置为display: flex;，并且我们使用flex-wrap: wrap;来实现多行布局。每列的容器宽度被设置为calc(33.33% - 10px);以实现等宽的三列布局。最后，我们使用overflow: auto;为每列添加滚动条。

总结

在本文中，我们介绍了如何在CSS网格布局中为每列添加滚动条。我们使用overflow属性和CSS Grid布局的特性来实现这个效果。对于不支持CSS Grid布局的浏览器，我们可以使用Flexbox布局作为替代方案。无论是使用CSS Grid还是Flexbox，我们都可以轻松地为每列添加滚动条，以解决网格内容溢出的问题。希望本文能够帮助你在使用CSS网格布局时实现更好的用户体验。