Sobre a Aula
Espaçamento entre elementos com grid-gap
O layout CSS Grid oferece uma maneira poderosa de organizar elementos em uma grade. A propriedade grid-gap
permite adicionar espaçamento entre as linhas e colunas da grade, criando um layout mais organizado e legível.
Função da propriedade grid-gap
- Função: Define o espaçamento entre as linhas e colunas do layout grid.
- Aplicabilidade: Aplica-se a containers com
display: grid
. - Valores possíveis:
- Valor único: Define o mesmo espaçamento para linhas e colunas. Ex:
grid-gap: 10px;
- Dois valores: Define o espaçamento para linhas e colunas separados por um espaço. Ex:
grid-gap: 10px 20px;
- Quatro valores: Define o espaçamento para linhas e colunas, superior e inferior, separados por espaços. Ex:
grid-gap: 10px 20px 30px 40px;
initial
: Retorna ao espaçamento padrão do navegador.inherit
: Herda o valor degrid-gap
do container pai.
- Valor único: Define o mesmo espaçamento para linhas e colunas. Ex:
Exemplos práticos
1. Adicionar espaçamento uniforme entre todas as linhas e colunas:
HTML
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
CSS
.container { display: grid; grid-gap: 10px; }
2. Adicionar espaçamento maior entre as colunas:
HTML
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
CSS
.container { display: grid; grid-gap: 10px 20px; }
3. Definir espaçamento individual para linhas superior/inferior e colunas:
HTML
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
CSS
.container { display: grid; grid-gap: 20px 10px 30px 40px; }
Dicas e considerações:
- A propriedade
grid-column-gap
define o espaçamento apenas entre as colunas. - A propriedade
grid-row-gap
define o espaçamento apenas entre as linhas. - O espaçamento é aplicado antes de calcular o tamanho das áreas de grade.
- Use
grid-gap
em conjunto com outras propriedades de layout grid para criar layouts complexos.
Conclusão
grid-gap
é uma propriedade essencial para criar layouts grid com espaçamento adequado.
Entrar na conversa