element-plus/ssr-testing/cases/layout.vue

<template>
  <el-row style="margin-bottom: 20px">
    <el-col :span="24" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple-dark"
        style="border-radius: 4px; min-height: 36px; background: #99a9bf"
    /></el-col>
  </el-row>
  <el-row style="margin-bottom: 20px">
    <el-col :span="12" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="12" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
  </el-row>
  <el-row style="margin-bottom: 20px">
    <el-col :span="8" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="8" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
    <el-col :span="8" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
  </el-row>
  <el-row style="margin-bottom: 20px">
    <el-col :span="6" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="6" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
    <el-col :span="6" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="6" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
  </el-row>
  <el-row style="margin-bottom: 20px">
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
    /></el-col>
    <el-col :span="4" style="border-radius: 4px"
      ><div
        class="grid-content ep-bg-purple"
        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
    /></el-col>
  </el-row>
</template>