grid-template-areas与土地区域划分实例页面

展示

代码

• HTML：

  <div class="container">
      <item class="putao">葡萄种植区</item>
      <item class="longxia">龙虾养殖区</item>
      <item class="yangyu">鱼类养殖区</item>
      <item class="xigua">西瓜种植区</item>
  </div>

• CSS：

  .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas: 
          "葡萄 葡萄 葡萄"
          "龙虾 养鱼 养鱼"
          "龙虾 养鱼 养鱼"
          "西瓜 西瓜 西瓜";
      height: 400px;
  }
  .container item {
      outline: 1px dotted;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .putao { grid-area: 葡萄; }
  .longxia { grid-area: 龙虾; }
  .yangyu { grid-area: 养鱼; }
  .xigua { grid-area: 西瓜; }