h:panelGrid columns="3"

No código abaixo eu não consegui entender por que preciso colocar 3 colunas "h:panelGrid columns="3" para que na tela seja impresso:

//Código citado acima
<h:panelGrid columns="3">
                        <h:outputLabel value="Nome:" for="nome"/>
                        <h:inputText id="nome" value="#{autorBean.autor.nome}" required="true">
                            <f:validateLength minimum="5"/>
                        </h:inputText>
                        <h:message for="nome" id="messageNome"/>

                        <h:outputLabel value="Email:" for="email"/>
                        <h:inputText id="email" value="#{autorBean.autor.email}" required="true">
                            <f:passThroughAttribute name="type" value="email"/>
                        </h:inputText>
                        <h:message for="email" id="messageEmail"/>

                        <h:commandButton value="Gravar" action="#{autorBean.gravar}"/>
                    </h:panelGrid>

Exemplo Tele no browser.

Nome: | inputText --campo de texto na URL Email: | inputText --campo de texto na URL