How to use apex:panelGrid in Visualforce Page?

How to use <apex:panelGrid>  in Visualforce Page?

<apex:panelGrid> :
Renders an HTML table element in which each component found in the body of the 
< apex:panelGrid > is placed into a corresponding cell in the first row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell.

This tag supports following attributes:

Attribute	Description
contentClass	The style class used to display the content of the panelBarItem component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
contentStyle	The style used to display the content of the panelBarItem component, used primarily for adding inline CSS styles.
expanded	A Boolean value that specifies whether the content of this panelBarItem is displayed.
headerClass	The style class used to display the header of the panelBarItem component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
headerClassActive	The style class used to display the header of the panelBarItem component when the content of the panelBarItem is displayed, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
headerStyle	The style used to display the header of the panelBarItem component, used primarily for adding inline CSS styles.
headerStyleActive	The style used to display the header of the panelBarItem component when the content of the panelBarItem is displayed, used primarily for adding inline CSS styles.
id	An identifier that allows the panelBarItem to be referenced by other components in the page.
label	The text displayed as the header of the panelBarItem component.
name	The name of the panelBarItem. Use the value of this attribute to specify the default expanded panelItem for the panelBar.
onenter	The JavaScript invoked when the panelBarItem is not selected and the user clicks on the component to select it.
onleave	The JavaScript invoked when the user selects a different panelBarItem.
rendered	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.

Visualforce Example :

<apex:page >

    <apex:panelGrid columns="3" id="theGrid">

        <apex:outputText value="First" id="theFirst"/>

        <apex:outputText value="Second" id="theSecond"/>

        <apex:outputText value="Third" id="theThird"/>

        <apex:outputText value="Fourth" id="theFourth"/>

    </apex:panelGrid>

</apex:page>

Posted in: <apex:panelGrid> in Visualforce Page,apex:panelGrid tag in Visualforce page,Salesforce,Salesforce examples,salesforce training,Visualforce,Visualforce examples,Visualforce Training