Aula 15: Grade CSS – Construindo Layouts Complexos com Facilidade

Nesta palestra, vamos nos aprofundar no CSS Grid, um poderoso sistema de layout que oferece controle total sobre linhas e colunas. Embora o Flexbox seja ótimo para layouts unidimensionais (linhas ou colunas), o Grid permite lidar com layouts bidimensionais, o que significa que você pode criar layouts de páginas da web inteiras com precisão.

1. O que é grade CSS?

CSS Grid Layout, comumente conhecido como Grid, é um sistema de layout 2D projetado para gerenciar linhas e colunas simultaneamente. Você pode pensar nisso como uma matriz ou planilha onde cada elemento é colocado em células de grade, permitindo layouts limpos e organizados.

2. Como criar uma grade

Para começar a usar o Grid, você precisará definir um contêiner como uma grade definindo display: grid. Em seguida, você definirá o número de linhas e colunas usando as propriedades grid-template-rows e grid-template-columns.

Exemplo:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

Isso cria uma grade 2x2, com cada célula sendo 100px por 100px e um intervalo de 10px entre as células.

3. Definindo Áreas de Grade

Você também pode definir áreas de grade específicas para os itens ocuparem usando a propriedade grid-area. Isso permite que você controle exatamente onde um item será colocado na grade.

Exemplo:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Este exemplo cria um layout básico onde o cabeçalho e o rodapé se estendem por duas colunas e a barra lateral e o conteúdo principal ocupam suas próprias colunas. A propriedade grid-template-areas permite definir a estrutura da grade com nomes para cada área.

4. Ajuste automático e preenchimento automático para grades responsivas

Uma das melhores partes do CSS Grid é como é fácil torná-lo responsivo. As propriedades de ajuste automático e preenchimento automático podem ajustar automaticamente o número de colunas com base no espaço disponível.

Exemplo:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

Neste exemplo, a grade criará automaticamente quantas colunas couberem no contêiner, com cada coluna tendo pelo menos 150px de largura. Se houver espaço extra, as colunas serão esticadas para preencher a área restante.

5. Alinhamento de grade

Você pode alinhar itens dentro da grade usando justify-items e align-items.

• justify-items: Alinha os itens horizontalmente dentro de suas células da grade.
• align-items: alinha itens verticalmente dentro de suas células da grade.

Exemplo:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

Isso centralizará todos os itens horizontal e verticalmente dentro das células da grade.

6. Grades aninhadas

CSS Grid também oferece suporte a grades aninhadas, permitindo criar grades dentro de itens de grade para layouts mais complexos.

Exemplo:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

Neste exemplo, um dos itens da grade contém uma grade aninhada, permitindo layouts mais flexíveis e detalhados.

7. Grid vs. Flexbox: quando usar cada um

• Use o Flexbox quando precisar gerenciar o layout de itens em uma direção (linhas ou colunas).
• Use Grid quando precisar gerenciar linhas e colunas simultaneamente para layouts complexos e multidimensionais.

Conclusão

CSS Grid é uma virada de jogo para web design, oferecendo uma maneira poderosa de construir layouts complexos e responsivos com o mínimo de esforço. Esteja você trabalhando no layout de um blog, em um painel ou na estrutura de um site, o Grid oferece flexibilidade para controlar linhas e colunas com facilidade.

siga-me no LinkedIn

Ridoy Hasan