当包含元素有滚动条时，如何正确地划分网格？

当包含元素有滚动条时，正确地划分网格可以通过以下步骤实现：

确定网格容器：首先，将包含元素的父元素设置为网格容器。可以使用CSS属性display: grid来创建一个网格容器。
划分网格行和列：使用CSS属性grid-template-rows和grid-template-columns来定义网格的行和列。可以使用百分比、像素或其他单位来指定每个行或列的大小。
确定网格项位置：使用CSS属性grid-row和grid-column来指定每个网格项的位置。可以使用行和列的起始和结束位置来定义每个网格项的位置。
处理滚动条：如果包含元素有滚动条，可以使用CSS属性overflow来控制滚动条的显示。可以设置为auto来自动显示滚动条，或者设置为hidden来隐藏滚动条。
调整网格布局：根据需要，可以使用CSS属性grid-template-areas来定义网格布局。通过为每个网格项指定一个区域名称，然后使用grid-area属性将网格项放置在指定的区域内。

总结起来，正确地划分网格可以通过设置网格容器、划分网格行和列、确定网格项位置、处理滚动条以及调整网格布局来实现。以下是一个示例代码：

<style>
  .grid-container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    overflow: auto;
  }

  .grid-item {
    background-color: #ccc;
    padding: 20px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <div class="grid-item">Grid Item 4</div>
  <div class="grid-item">Grid Item 5</div>
  <div class="grid-item">Grid Item 6</div>
  <div class="grid-item">Grid Item 7</div>
  <div class="grid-item">Grid Item 8</div>
  <div class="grid-item">Grid Item 9</div>
</div>

在这个示例中，我们创建了一个包含9个网格项的网格容器，并使用grid-template-rows和grid-template-columns属性将网格划分为3行和3列。每个网格项都有一个背景颜色和一些填充。如果网格容器的高度不足以容纳所有网格项，将自动显示滚动条。