Ajuste de tamanhos PrimeFaces

Olá pessoal, estou com um problema com alguns tamanho.
tenho um dataGrid com 3 panel grid por linha. Quando eu tenho apenas um fica muito torto.
segue a imagem em anexo.
meu código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:comp="http://java.sun.com/jsf/composite/componentes"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>SCISPI - Sistema científico de enquetes e pesquisa</title>
</h:head>
<ui:composition template="_template.xhtml">
	<ui:define name="corpo">

		<h:form id="formLogin">
			<div align="right">
				<h:panelGrid columns="3">

					<p:commandButton id="basic" value="Logar" oncomplete="login.show()" />
				ou
				<p:commandLink id="cadastro" value="Cadastre-se"
						action="usuario.xhtml" />

				</h:panelGrid>
			</div>

			<p:dialog id="modalDialog" header="Login" widgetVar="login"
				modal="true" resizable="false">
				<h:form id="formlogin">
					<h:panelGrid columns="2" autoUpdate="true">

						<h:outputLabel value="Login:" />
						<p:inputText value="#{loginBean.usuario.login}" />

						<h:outputLabel value="Senha:" />
						<p:password password="true" value="#{loginBean.usuario.senha}" />

						<p:commandButton value="Login" action="#{loginBean.efetuarLogin}" />
					</h:panelGrid>
				</h:form>
			</p:dialog>

		</h:form>

		<h:form id="formGrid">
			<p:dataGrid var="enquete" value="#{enqueteBean.enquetes}" columns="5"
				rows="3" >

				<p:panel header="#{enquete.nome}" style="text-align:center">

					<h:panelGrid columns="2">
						<h:outputText value="Area:" style="font-weight:bold" />
						<h:outputText value="#{enquete.area}" />
						<h:outputText value="Descrição:" style="font-weight:bold" />
						<h:outputText value="#{enquete.descricao}" />
					</h:panelGrid>

					<p:commandLink update=":formGrid:enqueteDetalhe"
						oncomplete="enqueteDetalhe.show()" title="Detalhes da Enquete">
						<h:outputText styleClass="ui-icon ui-icon-search"
							style="margin:0 auto;" />
						<f:setPropertyActionListener target="#{enqueteBean.selectedEnquete}"
							value="#{enquete}" />
					</p:commandLink>
				</p:panel>

			</p:dataGrid>
			
			<p:dialog id="enqueteDetalhe" header="Detalhes da Enquete"
				modal="true" widgetVar="enqueteDetalhe">
				<h:form id="enqueteDetail" style="text-align:center;"
					layout="block">
					<h:panelGrid columns="2" cellpadding="5">
					
						<h:outputLabel for="dataInicial" value="Inicio: " />
						<h:outputText id="dataInicial"
							value="#{enqueteBean.selectedEnquete.dataInicial}" />

						<h:outputLabel for="dataFinal" value="Final: " />
						<h:outputText id="dataFinal"
							value="#{enqueteBean.selectedEnquete.dataFinal}" />

						<h:outputLabel for="descricao" value="Descrição: " />
						<h:outputText id="descricao"
							value="#{enqueteBean.selectedEnquete.descricao}" />
					</h:panelGrid>
				</h:form>
				
			</p:dialog>
			
		</h:form>

	</ui:define>
</ui:composition>

</html>
Obrigado, abraços.
Topicos relacionados
