<template>
<div class="Grid">
<div class="Grid-cell">...</div>
<!-- 占50% -->
<div class="Grid-cell u-1of2">...</div>
<!-- 占33.33% -->
<div class="Grid-cell u-1of3">...</div>
<!-- 占25% -->
<div class="Grid-cell u-1of4">...</div>
</div>
</template>
<style>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
</style>