Responsive layout with Grid CSS
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.
How to do it…
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> ...
Get PrimeFaces Cookbook - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
