$boxPadding: 20px 42px; .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 82px; grid-gap: 18px; >div { background: #fff; padding: $boxPadding; border-radius: 20px; box-sizing: border-box; } .overviewProgress { grid-column: 2 / 5; grid-row: 1 / 5; display: grid; grid-auto-rows: 70px; padding: 0; background: transparent; .duration, .trialCount { background: #fff; padding: $boxPadding; border-radius: 20px; box-sizing: border-box; /* for alert message tooltip position */ position: relative; } .duration { // grid-row: 1 / 3; height: 136px; } .trialCount { margin-top: 14px; height: 228px; } } } .overviewBasicInfo { grid-column-start: 1; grid-row: 1 / 5; z-index: 2; } .basic { line-height: 21px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; p { font-size: 14px; color: #8f8f8f; margin-top: 20px; } div { font-size: 16px; color: #484848; } .nowrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .overviewTable { grid-column: 5 / 9; grid-row: 1 / 10; overflow: hidden; .topTrialTitle { width: 72%; } .active { background: #f3f2f1; } .max { margin-left: 7px; } .mincenter { margin: 0 13px 0 10px; } .chooseEntry { margin-right: 10px; line-height: 30px; } } .overviewCommand, .overviewChart { grid-column: 1 / 5; } .overviewCommand { height: 144px; overflow: hidden; } $circle: 10px; $bgblue: #0071bc; .overviewChart { grid-row: 7 / 11; margin-top: -38px; .circle { width: $circle; height: $circle; border-radius: 50%; background-color: $bgblue; margin-top: 6px; margin-right: 18px; } }