要在不使用媒体查询的情况下更改网格模板区域，可以使用CSS变量（也称为自定义属性）和calc()函数来实现。以下是一个示例代码：

HTML:

  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6

CSS:

.grid-container {
  display: grid;
  grid-template-columns: var(--column-width);
  grid-template-rows: var(--row-height);
  gap: 10px;
}

.grid-item {
  background-color: gray;
  padding: 20px;
}

@media (max-width: 600px) {
  .grid-container {
    --column-width: 1fr;
    --row-height: auto;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .grid-container {
    --column-width: repeat(2, 1fr);
    --row-height: auto;
  }
}

@media (min-width: 901px) {
  .grid-container {
    --column-width: repeat(3, 1fr);
    --row-height: auto;
  }
}

在上面的示例中，我们使用CSS变量--column-width和--row-height来定义列和行的宽度。然后，使用grid-template-columns和grid-template-rows属性来设置网格模板的列宽和行高。

在不同的媒体查询中，我们可以通过更改这些CSS变量的值来改变网格模板的布局。例如，当页面宽度小于或等于600px时，我们将--column-width设置为1fr，表示每列宽度都为网格容器的可用空间的相等份额，--row-height设置为auto，表示行高根据内容自动调整。

当页面宽度在601px到900px之间时，我们将--column-width设置为repeat(2, 1fr)，表示每行有两个相等宽度的列。

当页面宽度大于900px时，我们将--column-width设置为repeat(3, 1fr)，表示每行有三个相等宽度的列。

通过这种方式，我们可以根据不同的屏幕宽度来更改网格模板的布局，而不需要使用媒体查询。