vue-materialフレームワークを使用してグリッドレイアウトを作成するのが難しい

Question

vue-materialフレームワークを使用して2つの列を含む各行に4行レイアウトを作成しようとしています。

レイアウトは、ビューポートのサイズに等しいか600PX未満である場合

列が互いに積み重ねるべき応答性であるべきです。積み重ねられない

画像：

の列は、このような通常のレイアウトを持っている必要があります。私は、画面サイズを小さくするとき

このコンテンツはスタッキングされていません。

Code using vue material

これはコードです| HTML

<div id="app"> 

    <div class="edit"> 

    <h1 class="md-display-3">Connect to be more</h1> 
    <h2 class="md-subhead">Always be aware of the state of your business </h2> 

    </div> 

    <div id="canvas"> 

    <md-layout md-row md-columns id="rightColumn"> 

     <md-layout md-column> 
     <h1 class="" id="entitle">Connect soft documents</h1> 
     </md-layout> 

     <md-layout md-column> 
     <h1 class="" id="entitle">Connect soft documents</h1> 
     </md-layout> 


    </md-layout> 

    </div> 



</div> 

これはコードです。 CSS

.edit { 
    text-align: center; 
    font-family: Heiti SC; 
} 

    #entitle { 

    line-height: 1.2em; 
    } 
.md-display-3 { 

    font-family: Heiti SC; 
} 

/* media queries */ 


/* tablet */ 

@media screen and (max-width: 600px) { 
    .md-column { 
    float: none !important; 
    margin: auto; 
    text-align: center; 
    width: 46%; 
    } 
} 


#rightColumn { 
    background-color: aqua; 
    font-family: Heiti SC; 
} 

Answer 1

これはどのように行うことができます。

Vue.use(VueMaterial) 
 

 
Vue.config.productionTip = false 
 

 
new Vue({ 
 
    el: '#app', 
 
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.css'); 
 

 

 
#container > .md-layout { 
 
    background-color: white; 
 
    min-height: 100px; 
 
    border-color: black; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /*border-style: dotted;*/ 
 
    border-width: 1px; 
 
    padding: 8px; 
 
} 
 

 
body { 
 
    background: #eee; 
 
}

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
 
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.js"></script> 
 

 

 
<div id="app"> 
 
    <md-layout id="container"> 
 
    
 
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> 
 
     1 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50"> 
 
     2 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50"> 
 
     3 
 
    </md-layout> 
 
    
 
    
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25"> 
 
     4 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25"> 
 
     5 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25"> 
 
     6 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25"> 
 
     7 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="66" md-flex-large="66" md-flex-xlarge="66"> 
 
     8 
 
    </md-layout> 
 
    
 
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33"> 
 
     9 
 
    </md-layout> 
 
    
 
    </md-layout> 
 
</div>