div做一个简单的自适应布局

效果

代码：

<template>
	<div class="main-page">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
<style lang="less" scoped>
.main-page {
  width: calc(100% + 40px);
  margin: -20px;
  background-color: #f0f3fa !important;
  height: calc(100vh - 120px);
  > :nth-child(n) {
    float: left;
    background: #ffffff;
    width: calc(32%);
    height: calc((100% - 10px) / 2);
    padding: 0 20px;
    position: relative;
    overflow: hidden;
  }
  > :not(:first-child) {
    padding: 20px 20px;
  }
  > :nth-child(1) {
    position: relative;
    width: calc(64%);
  }
  > :nth-child(2),
  :nth-child(5) {
    width: calc(36% - 10px);
  }
  > :nth-child(3),
  :nth-child(4) {
    width: calc((64% - 10px) / 2);
  }
  > :nth-child(2),
  :nth-child(4),
  :nth-child(5) {
    margin-left: 10px;
  }
  > :nth-child(1),
  :nth-child(2) {
    margin-bottom: 10px;
  }
}
.main-page:after {
  content: "";
  display: block;
  clear: both;
}
.main-left-top {
  :deep(.el-card__body) {
    position: relative;
  }
}
</style>
</template>