Grid CSS不起作用（Grid模板列）

Question

想法是将该部分分为两列（使用flex并起作用），对于左侧部分，我只想创建一个以四个字母为链接的网格（2x2）（一种菜单）

出了点问题：

HTML：

<section>
    <div id="MainFlex">
      <div class="Main LSGrid">
          <div class="Box 1">
            <h1><a href="#A">A</h1>
          </div>
          <div class="Box 2">
            <h1><a href="#B">B</h1>
          </div>
          <div class="Box 3">
            <h1><a href="#C">C</h1>
          </div>
          <div class="Box 4">
            <h1><a href="D!">D</h1>
          </div>
      </div>
      <div class="Main RS">
          <h1>Latest Post</h1>
      </div>
    </div>
  </section>

CSS：

#MainFlex .Main.LSGrid {
  display: grid;
  grid-template-columns: auto auto;
  width: 70%;
}

Answer 1

我认为错误是在CSS中，请尝试以下操作：

#MainFlex .Main.LSGrid {
        display: grid;
        grid-template-columns: auto auto auto;
        width: 70%;
        }

注意：'grid-template-columns'属性有3个自动选项