CSS Grid Layout [Parte 3] – Alinhamentos

Exemplos de alinhamentos de grid, row-axis e column-axis

| Publicado em 13 de fevereiro de 2019

Olá! Ed Francisco chegando para te trazer o terceiro e último artigo da série sobre CSS Grid Layout.

Neste artigo veremos alguns exemplos de alinhamentos aplicados com o CSS Grid Layout. Com isso você poderá observar diversos comportamentos que esse alinhamentos oferecem para que você possa usar em elementos durante o desenvolvimento de grids.

Mas antes de qualquer coisa, caso você tenha caído direto neste artigo e não conhece conceitos básicos sobre CSS Grid, você pode também ler as partes 1 e 2 desta série.

Artigo 1 → CSS Grid Layout [Parte 1] – Guia introdutório

Artigo 2 → CSS Grid Layout [Parte 2] – Posicionamento de elementos no Grid

Se você conhece Flexbox notará que as propriedades de alinhamentos aplicados nele são bem parecidas com as propriedades aplicadas no CSS Grid Layout. Mas de qualquer forma é importante conhecermos agora como elas se comportam.

Vamos aos tipos.

Alinhamentos dos itens do Grid

Neste tópico vamos demonstrar os alinhamento dos itens de Grid que podem ser desenvolvidos tanto em relação do eixo de coluna (vertical), column-axis, quanto no eixo de linha (horizontal), row-axis.

Alinhamentos dos itens do Grid ao longo do eixo de coluna

Aqui vamos usar a propriedade align-items que permite definir alinhamentos itens ao longo do eixo de coluna (vertical). Conheça os possíveis valores para esta propriedade:

  • stretch: Esse é o valor padrão. Neste caso os itens serão esticados para preencher toda a dimensão da célula;
  • start: Alinha os itens para serem nivelados com a borda inicial de suas células em relação ao eixo de coluna;
  • end: Alinha os itens para serem nivelados com a extremidade final de suas células em relação ao eixo de coluna;
  • center: Alinha os itens no centro das células.

Vamos a alguns exemplos de aplicação em códigos.

Código HTML:

<h4>stretch</h4>
<div class="container stretch">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>stretch</div>
    <div class="item_3">Item 3</div>
</div>
<h4>start</h4>
<div class="container start">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>start</div>
    <div class="item_3">Item 3</div>
</div>
<h4>end</h4>
<div class="container end">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>end</div>
    <div class="item_3">Item 3</div>
</div>
<h4>center</h4>
<div class="container center">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>center</div>
    <div class="item_3">Item 3</div>
</div>

Código CSS:

.container {
    display: grid;
    background-color: #cdf6eb;
    margin: 10px auto 30px;
    max-width: 400px;
    font-family: sans-serif;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 70px;
}
.stretch {
     align-items: stretch;
}
.start {
     align-items: start;
}
.end {
     align-items: end;
}
.center {
     align-items: center;
}
.container div {
    background: #f06923; 
    margin: 8px 4px;
    font-size: 1em;
    color: #fff;
    /* as proriedades a partir daqui alinham o texto no centro */
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
}
h4 {
    margin: 20px 0 0 20px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Alinhamentos dos itens do Grid ao longo do eixo de linha

Aqui vamos usar a propriedade justify-items que permite definir alinhamentos dos itens ao longo do eixo de linha (horizontal). Esta propriedade é o oposto de align-items. Conheça os possíveis valores para esta propriedade:

  • stretch: Esse é o valor padrão. Neste caso os itens serão esticados para preencher toda a dimensão da célula;
  • start: Alinha os itens para serem nivelados com a borda inicial de suas células em relação ao eixo de linha;
  • end: Alinha os itens para serem nivelados com a extremidade final de suas células em relação ao eixo de linha;
  • center: Alinha os itens no centro das células.

Vamos a alguns exemplos de aplicação em códigos.

Código HTML:

<h4>stretch</h4>
<div class="container stretch">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2</div>
    <div class="item_3">Item 3</div>
</div>
<h4>start</h4>
<div class="container start">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2</div>
    <div class="item_3">Item 3</div>
</div>
<h4>end</h4>
<div class="container end">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2</div>
    <div class="item_3">Item 3</div>
</div>
<h4>center</h4>
<div class="container center">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2</div>
    <div class="item_3">Item 3</div>
</div>

Código CSS:

.container {
    display: grid;
    background-color: #cdf6eb;
    margin: 10px auto 30px;
    max-width: 400px;
    font-family: sans-serif;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 70px;
}
.stretch {
     justify-items: stretch;
}
.start {
     justify-items: start;
}
.end {
     justify-items: end;
}
.center {
     justify-items: center;
}
.container div {
    background: #f06923; 
    margin: 8px 4px;
    font-size: 1em;
    color: #fff;
    /* as proriedades a partir daqui alinham o texto no centro */
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
}
h4 {
    margin: 20px 0 0 20px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Alinhamentos dos itens na Grid Cell

Neste tópico vamos demonstrar os alinhamentos dos itens aplicados a uma Grid Cell que podem ser desenvolvidos tanto em relação do eixo de coluna (vertical), column-axis, quanto no eixo de linha (horizontal), row-axis.

Alinhamentos dos itens na Grid Cell ao longo do eixo de coluna

Aqui vamos usar a propriedade align-self que permite definir um alinhamento dentro uma única Grid Cell sobrescrevendo o que foi definido no align-items do Grid Container. Conheça os possíveis valores para esta propriedade:

  • stretch: Esse é o valor padrão. Neste caso os itens serão esticados para preencher toda a dimensão da célula;
  • start: Alinha os itens para serem nivelados com a borda inicial de suas células em relação ao eixo de coluna;
  • end: Alinha os itens para serem nivelados com a extremidade final de suas células em relação ao eixo de coluna;
  • center: Alinha os itens no centro das células.

Código HTML:

<h4>stretch</h4>
<div class="container stretch">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>stretch</div>
    <div class="item_3">Item 3</div>
</div>
<h4>start</h4>
<div class="container start">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>start</div>
    <div class="item_3">Item 3</div>
</div>
<h4>end</h4>
<div class="container end">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>end</div>
    <div class="item_3">Item 3</div>
</div>
<h4>center</h4>
<div class="container center">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>center</div>
    <div class="item_3">Item 3</div>
</div>

Código CSS:

.container {
    display: grid;
    background-color: #cdf6eb;
    margin: 10px auto 30px;
    max-width: 400px;
    font-family: sans-serif;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 100px;
}
.stretch .item_2 {
     align-self: stretch;
}
.start .item_2 {
     align-self: start;
}
.end .item_2 {
     align-self: end;
}
.center .item_2 {
     align-self: center;
}
.stretch {
     align-items: start;
}
.start , .end, .center {
     align-items: stretch;
}
.container div {
    background: #f06923; 
    margin: 8px 4px;
    font-size: 1em;
    color: #fff;
    /* as proriedades a partir daqui alinham o texto no centro */
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
}
h4 {
    margin: 20px 0 0 20px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Alinhamentos dos itens na Grid Cell em relação ao eixo de linha

Aqui vamos usar a propriedade justify-sef que permite definir um alinhamento dentro uma única Grid Cell sobrescrevendo o que foi definido no justify-items do Grid Container. Esta propriedade é o oposto de align-self. Conheça os possíveis valores para esta propriedade:

  • stretch: Esse é o valor padrão. Neste caso os itens serão esticados para preencher toda a dimensão da célula;
  • start: Alinha os itens para serem nivelados com a borda inicial de suas células em relação ao eixo de linha;
  • end: Alinha os itens para serem nivelados com a extremidade final de suas células em relação ao eixo de linha;
  • center: Alinha os itens no centro das células.

Código HTML:

<h4>stretch</h4>
<div class="container stretch">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>stretch</div>
    <div class="item_3">Item 3</div>
</div>
<h4>start</h4>
<div class="container start">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>start</div>
    <div class="item_3">Item 3</div>
</div>
<h4>end</h4>
<div class="container end">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>end</div>
    <div class="item_3">Item 3</div>
</div>
<h4>center</h4>
<div class="container center">
    <div class="item_1">Item 1</div>
    <div class="item_2">Item 2<br/>center</div>
    <div class="item_3">Item 3</div>
</div>

Código CSS:

.container {
    display: grid;
    background-color: #cdf6eb;
    margin: 10px auto 30px;
    max-width: 400px;
    font-family: sans-serif;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 100px;
}
.stretch .item_2 {
     justify-self: stretch;
}
.start .item_2 {
     justify-self: start;
}
.end .item_2 {
     justify-self: end;
}
.center .item_2 {
     justify-self: center;
}
.stretch {
     justify-items: start;
}
.start , .end, .center {
     justify-items: stretch;
}
.container div {
    background: #f06923; 
    margin: 8px 4px;
    font-size: 1em;
    color: #fff;
    /* as proriedades a partir daqui alinham o texto no centro */
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
}
h4 {
    margin: 20px 0 0 20px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Alinhamentos das Grid Tracks no Grid Container

Neste tópico vamos demonstrar os alinhamentos das Grid Tracks no Grid Container que podem ser desenvolvidos tanto em relação do eixo de coluna (vertical), column-axis, quanto no eixo de linha (horizontal), row-axis.

Estes tipos de alinhamentos são aplicados quando o tamanho total de um grid é menor que o tamanho de seu Grid Container.

Alinhamentos das Grid Tracks no Grid Container ao longo do eixo de coluna

Aqui vamos usar a propriedade align-content que permite definir o alinhamento das Grids Tracks dentro de um Grid Container em relação do eixo de coluna (vertical). Conheça os possíveis valores para esta propriedade:

  • start: Esse é o valor padrão. As Grid Tracks são alinhadas a partir do início do Grid Container em relação ao eixo de coluna;
  • end: As Grid Tracks são alinhadas a partir do fim do Grid Container em relação ao eixo de coluna;
  • center: As Grid Tracks são alinhadas ao centro do Grid Container;
  • space-between: Cria um alinhamento uniforme entre as Grid Tracks com um espaçamentos entre esses elementos. A primeira Grid Track é deslocada para o início, e a última é deslocada para o final do Grid Container;
  • space-around: As Grid Tracks também são distribuídas ao longo contêiner, onde é criado um espaçamento ao redor dos elementos. Com isso, a primeira e o última Grid Track possuirão margens e não ficaram grudadas as extremidades do contêiner. Visualmente os espaçamentos antes da primeira e depois do última Grid Track são menores que os outros espaçamentos. O que acontece é que os espaçamentos são aplicados acima e abaixo de cada Grid Track, portanto os espaçamentos que não estão nas extremidades tem tamanho dobrado porque soma o espaçamento abaixo do elemento antecessor e o espaçamento acima do elemento sucessor.
  • space-evenly: As Grid Tracks também são distribuídos ao longo contêiner, onde também é criado um espaçamento ao redor dos elementos. O que difere do space-around é que os espaçamentos entre os elementos e os espaçamentos nas extremidades do contêiner são distribuídos de forma igualitária.

Código HTML:

<h4>start</h4>
<div class="container start">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>end</h4>
<div class="container end">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>center</h4>
<div class="container center">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-between</h4>
<div class="container space-between">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-around</h4>
<div class="container space-around">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-evenly</h4>
<div class="container space-evenly">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>

Código CSS:

.container {
	background-color: #cdf6eb;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 100px);
	max-width: 500px;
	height: 100vh;
	margin: 0 auto;
}	
.start {
     align-content: start;
}
.end {
     align-content: end;
}
.center {
     align-content: center;
}
.space-between {
     align-content: space-between;
}
.space-around {
     align-content: space-around;
}
.space-evenly {
     align-content: space-evenly;
}
.item {
	background-color: #f06923;
	color: #fff;
	padding: 1rem;
}		
.item:nth-child(even){
	background-color: #34a6db;
}
h4 {
    margin: 40px 0 10px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Alinhamentos das Grids Tracks no Grid Container ao longo do eixo de linha

Aqui vamos usar a propriedade justify-content que permite definir das Grids Tracks dentro de um Grid Container em relação do eixo de linha (horizontal). Esta propriedade é o oposto de align-content. Conheça os possíveis valores para esta propriedade:

  • start: Esse é o valor padrão. As Grid Tracks são alinhadas a partir do início do Grid Container em relação ao eixo de linha;
  • end: As Grid Tracks são alinhadas a partir do fim do Grid Container em relação ao eixo de linha;
  • center: As Grid Tracks são alinhadas ao centro do Grid Container;
  • space-between: Cria um alinhamento uniforme entre as Grid Tracks com um espaçamentos entre esses elementos. A primeira Grid Track é deslocada para o início, e a última é deslocada para o final do Grid Container;
  • space-around: As Grid Tracks também são distribuídas ao longo contêiner, onde é criado um espaçamento ao redor dos elementos. Com isso, a primeira e o última Grid Track possuirão margens e não ficaram grudadas as extremidades do contêiner. Visualmente os espaçamentos antes da primeira e depois da última Grid Track são menores que os outros espaçamentos. O que acontece é que os espaçamentos são aplicados no lado esquerdo e direito de cada Grid Track, portanto os espaçamentos que não estão nas extremidades tem tamanho dobrado porque soma o espaçamento a direita do elemento antecessor e o espaçamento a esquerda do elemento sucessor.
  • space-evenly: As Grid Tracks também são distribuídos ao longo contêiner, onde também é criado um espaçamento ao redor dos elementos. O que difere do space-around é que os espaçamentos entre os elementos e os espaçamentos nas extremidades do contêiner são distribuídos de forma igualitária.

Código HTML:

<h4>start</h4>
<div class="container start">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>end</h4>
<div class="container end">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>center</h4>
<div class="container center">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-between</h4>
<div class="container space-between">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-around</h4>
<div class="container space-around">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>
<h4>space-evenly</h4>
<div class="container space-evenly">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>			
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>			
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>			
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
</div>

Código CSS:

.container {
	background-color: #cdf6eb;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(5, 100px);
	grid-template-rows: repeat(3, 1fr);
	max-width: 700px;
	height: 300px;
	margin: 0 auto;
}	
.start {
     justify-content: start;
}
.end {
     justify-content: end;
}
.center {
     justify-content: center;
}
.space-between {
     justify-content: space-between;
}
.space-around {
     justify-content: space-around;
}
.space-evenly {
     justify-content: space-evenly;
}
.item {
	background-color: #f06923;
	color: #fff;
	padding: 1rem;
}		
.item:nth-child(even){
	background-color: #34a6db;
}
h4 {
    margin: 40px 0 10px;    
    font-family: sans-serif;    
    font-weight: normal;
    font-size: 1em;
    color: #3b3b3b;
    text-align: center;
}

Agora vamos ver cada valor isoladamente no JSFiddle.

Conclusão

Com este artigo você pôde conhecer os tipos de alinhamentos aplicados através do CSS Grid Layout e com ele também encerramos nossa série.

Você tem nesta série um pequeno Guia sobre CSS Grid Layout que não é completo, pois se trata de um assunto extenso, entretanto procuramos abranger uma gama importante de técnicas sobre este módulo.

Sempre reforçando que caso você não tenha visto as duas primeiras partes que também de uma verificada nelas.

Artigo 1 → CSS Grid Layout [Parte 1] – Guia introdutório

Artigo 2 → CSS Grid Layout [Parte 2] – Posicionamento de elementos no Grid

E se você deseja aprender ainda mais sobre CSS Grid Layout, o Chief of Design oferece conteúdo em vídeo sobre essa ferramenta no Curso em Vídeo de Fluência em HTML & CSS. Dê uma conferida!!!

Então é isso. Fico por aqui. Espero que você tenha gostado desta parte final e de toda série. Peço que você compartilhe com amigos e deixe seu comentário.

Abraço! Até!

Ed Francisco

Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.

Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.

Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).

Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.