p：dataGrid：4-2-1列のグリッドレイアウトは可能ですか？

Question

私は4列の応答するDataGridを持っています。

<p:dataGrid value="#{myController.objList}" var="obj" layout="grid" columns="4"> 

    <p:outputPanel> 
     <h:outputText value="Label 1: " /> 
     <h:outputText value="#{obj.field1}" /> 
    </p:outputPanel> 

    <p:outputPanel> 
     <h:outputText value="Label 2: " /> 
     <h:outputText value="#{obj.field2}" /> 
    </p:outputPanel> 

</p:dataGrid> 

DataGridが4から1列に切り替わるときの画面の幅（約640px）によって異なります。私の意図は、Screenの幅に応じて、まずPrimeFaces GridCSSで可能なように、4列から2列に、次に2列から1列に切り替えることです。

• これはDataGridで可能ですか？
• メディアクエリを使用してCSSを変更することはできますか？
• ArrayListをGridCSSに統合することはできますか？

Answer 1

メディアクエリを使用してdataGridスタイルのクラスを変更すると、要求されたとおりに動作します。

.ui-grid-row { 
    display: flex; 
    flex-wrap: wrap; 
} 

@media screen and (max-width: 640px) { 
    .ui-datagrid-column { 
     width: 100% !important; 
    } 
} 
@media screen and (min-width: 641px) and (max-width: 1024px) { 
    .ui-datagrid-column { 
     width: 50% !important; 
    } 
} 
@media screen and (min-width: 1025px) { 
    .ui-datagrid-column { 
     width: 25% !important; 
    } 
}