O'Reilly logo

PrimeFaces Cookbook - Second Edition by Oleg Varaksin, Mert Çalışkan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required