Grid CSS
is a lightweight stylesheet bundled with PrimeFaces that offers responsive layout utilities for mobile devices and desktops. In this recipe, we will create a responsive user interface with custom styling and also demonstrate them in a nested version.
A simple definition of a responsive grid is created with the help of HTML div
components and CSS classes as follows:
<div class="ui-grid ui-grid-responsive"> <div class="ui-grid-row"> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1</div> <div class="ui-grid-col-1">1<...