Primeiras aulas do curso CSS Grid: simplificando layouts

CSS Grid: simplificando layouts

Definindo o layout base - Introdução

(00:01) Olá! Meu nome é Matheus Castiglioni e serei seu instrutor neste curso. Nosso projeto será criar o site da Alura Store do zero, por meio do CSS Grid Layout.

(00:16) Basicamente, em nosso site temos um menu que contém informações referentes à navegação, os conteúdos gerais do site e ao final um rodapé. Dentro desse conteúdo geral, temos uma área de destaques que conterá imagens de aplicativos e jogos. Teremos, ainda, toda uma área de cards em que listaremos, por exemplo, aplicativos e jogos mais populares. Por fim, teremos uma sessão de lançamentos do site.

(00:58) O CSS Grid Layout é uma ferramenta que torna o desenvolvimento do nosso site mais simples, afinal conseguimos criar templates separados por áreas. No exemplo abaixo temos que a área verde é destinada ao header, já a vermelha forma todo conteúdo da página, e a azul que abriga o rodapé.

(1:38) Ao acessarmos o arquivo style.css, com todos os outros documentos do projeto base, encontraremos no código justamente essas três áreas definidas:

.app {
    background: #f1f1f1;
    display: grid;  
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto; 
}

(2:05) Além disso, conseguimos trabalhar com linhas e colunas, e dessa maneira podemos organizar com precisão as áreas ocupadas por cada elemento do site.

Seguindo essa mesma lógica, na parte de destaques, conseguimos definir a posição de cada elemento. Por exemplo o elemento principal deve ficar entre a linha 1e 3.

destaques__principal {
    background: url('../img/fortnite.jpg') center / cover no-repeat;
    grid-row: 1 / 3;
}

.destaques__secundario:nth-child(2) {
    background: url('../img/pubg.jpg') center / cover no-repeat;
}

(03:51) Também faremos nosso site ser responsivo, que funcione em qualquer tamanho de tela. Como estamos utilizando um computador para acessá-lo, a tela é um pouco maior, mas a medida que vamos diminuindo ela, forçando a janela para a esquerda por meio do mouse, as colunas vão se adaptando a esta nova área disponível.

(04:33) Se você está precisando tornar o desenvolvimento do layout do seu site um pouco mais simples, te vejo nas proxímas aulas.

Definindo o layout base - Definindo o layout base

(00:01) Depois de realizar a preparação de toda a infraestrutura básica para iniciarmos o projeto, abriremos a pasta alura-store dentro do VS Code. Por padrão, temos alguns arquivos iniciais para o projeto Alura Sorte, uma loja de jogos e aplicativos. Um dos arquivos base é index.html, que apresenta a seguinte estrutura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alura Store | Baixe nossos aplicativos e jogos</title>
    <link href="./assets/css/normalize.css" rel="stylesheet">
    <link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body class="app">
    <header class="cabecalho"></header>
    <main class="conteudo"></main>
    <footer  class="rodape"></footer>
    <script src="./assets/js/fontawesome.all.min.js"></script>
</body>
</html>

(01:00) Teremos os elementos estruturais do site em <body>, inclusive a importação do arquivo fontawesome, que será responsável por definir a iconografia do site. Temos, ainda, alguns arquivos css, por exemplo o normalize.css, que será responsável por coletar as diferenças de implementações em defaults do browser para um button ou link, e resetará isso tudo. Teremos também reset.css e style.css, todos dentro da pasta "assets > css".

(1:46) Dentro do diretório "assets" teremos a pasta "img", que conterá todas as imagens que serão utilizadas durante o projeto. Também encontraremos um arquivo em pdf, um protótipo do site. Observando esse protótipo, podemos começar a desenvolver associações com o nosso código html.

(2:54) Em nosso header, encontramos um cabecalho, conteudo e rodape. Primeiramente abriremos o index.html em uma aba do navegador.

(4:09)Para tornar o processo mais visível, escreveremos:

<body class="app">
    <header class="cabecalho">Cabeçalho</header>
    <main class="conteudo">Conteúdo</main>
    <footer  class="rodape">Rodapé</footer>
    <script src="./assets/js/fontawesome.all.min.js"></script>
</body>

(4:23) Esses textos aparecem na tela do navegador, mas ainda precisamos aplicar o Grid Layout CSS. Para isso, abriremos o arquivo style.css, em que utilizaremos a classe app- que refere-se ao <body>:

.app {
    background: #f1f1f1; 
    font-family: Arial, Helvetica, sans-serif;
}

.cabecalho {}

.conteudo {}

.rodape{} 

(4:48) Para começar a estilização, precisaremos de um "pai" para nossos elementos. Nesse caso, estamos utilizando o <body>, que se comportará como grid. Para tanto, incluiremos display: grid.

.app {
    background: #f1f1f1; 
    display: grid;
    font-family: Arial, Helvetica, sans-serif;
}

.cabecalho {}

.conteudo {}

.rodape{} 

(5:36) Precisamos especificar no código, que nosso template será dividido em áreas, como já sabemos. Para realizarmos essa especificação, usaremos a propriedade grid-template-areas, quer receberá as strings cabecalho, conteudo e rodape. Feito isso, ainda temos algumas configurações adicionais a serem realizadas. Uma delas é especificar qual será o tamanho das colunas e linhas do site, e isso será feito por meio de grid-template-columns. Como utilizaremos apenas uma coluna, definiremos como auto. Em seguida, definiremos o tamanho das linhas via grid-template-rows:

.app {
    background: #f1f1f1;
    display: grid;  
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto; 
}

(07:50) Inseriremos um background em todas as classes de área e refinarmos mais o layout.

.app {
    background: #f1f1f1;
    display: grid;  
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto; 
}

.cabecalho {
    background #00cc99
}

.conteudo {
    background #ff8080
}

.rodape {
    background #0099ff;
}

(08:20)Ao acessarmos o arquivo no navegador, veremos as três áreas divididas por cor, sendo o cabeçalho marcado pelo verde, conteúdo vermelho e rodapé azul. Apensar de termos essa organização de cores, ainda precisamos explicitar para o Grid que um cabeçalho é de fato um cabeçalho e deve se relacionar com a classe cabecalho, por exemplo. Retornando ao código de style.css, usaremos a propriedade grid-area, que receberá o nome de cada área correspondente.

.app {
    background: #f1f1f1;
    display: grid;  
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto; 
}

.cabecalho {
    background #00cc99
    grid-area: cabecalho;
}

.conteudo {
    background #ff8080
    grid-area: conteudo;
}

.rodape {
    background #0099ff;
    grid-area: rodape;
}

(10:20) O CSS Grid Layout é muito utilizado por possuir essa facilidade: podemos definir um template, estabelecermos áreas e associar elementos específicos a estas áreas.

Criando o layout da seção de destaques - Criando a seção destaques

Fizemos uma implementação básica do CSS Grid Layout: temos o cabeçalho, conteúdo e rodapé definidos espacialmente na página. Ainda estamos muito distantes do protótipo, que apresenta elementos complexos, informações contextualizadas, imagens e assim por diante.

Iremos focar na parte de destaque do site, em que encontraremos as informações principais sobre jogos e aplicativos, além de algumas categorias que servem de filtros para esses elementos. Como a ideia do curso não é escrever em HTML, e sim em CSS Grid Layout, já temos uma parte do código pronta e disponibilizada nos materiais extras.

Abriremos o arquivo index.html, e começaremos a trabalhar na sessão de destaques:

<section class="destaques">
            <div class="destaques__principal caixa">
                <h3 class="destaques__titulo">Fornite</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">PUBG</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Slack</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Whatsapp</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">CS: GO</h3>
            </div>
            <div class="destaques__categorias">
                <ul class="destaques__categorias___lista">
                    <li class="destaques__categorias___item">
                        <a class="destaques__categorias___link" href="#">
<i class="destaques__categorias___icone fab fa-buromobelexperte"></i>

Em seguida, teremos as categorias Aplicativos populares, Jogos populares e Lançamentos. Primeiramente, criaremos um arquivo css para a parte de destaques do site, que chamaremos junstamente de destaques.css. Importaremos esse arquivo em index.html ao escrever <link href="./assets/css/destaques.css" rel="stylesheet">.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alura Store | Baixe nossos aplicativos e jogos</title>
    <link href="./assets/css/normalize.css" rel="stylesheet">
    <link href="./assets/css/reset.css" rel="stylesheet">
    <link href="./assets/css/style.css" rel="stylesheet">
    <link href="./assets/css/destaques.css" rel="stylesheet">
</head>

Precisamos definir um grid para a área de destaque. Basicamente, teremos três linhas: a do PUBG, Slack e outra do WhatSapp e quatro colunas.

As grids não estão precisas, mas trata-se apenas de uma base para desenvolvermos a organização do nosso site. No arquivo recèm criado destaques.css, coletaremos a classe destaques e faremos com que essa classe se comporte como grid.

.destaques { 
    display: grid;
}

Feito isso, precisamos definir as quatro colunas. O processo é parecido, e definiremos 25% de área a ser ocupada por linha para cada grid.

.destaques { 
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

Retiraremos as cores do background para facilitar a visualização, e então notaremos no navegador as divisões das colunas feitas. Agora que as colunas estão configuradas, definiremos as três linhas e seus tamanhos:

.destaques { 
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%; 
}

Essa configuração não é o suficiente, pois ainda não esclarecemos a localidade das propriedades, simplesmente solicitamos que a classe destaques se comportasse como grid. Definiremos uma altura(height), que será calculada a partir de 100vh, isto é, com base no tamanho total da área do browser, e retiraremos a área que deve ser ocupada pelo cabeçalho, que sabemos possuir 50px. Inseriremos um background para facilitar a visualização da área no navegador:

.destaques { 
    background: red;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50px);
}

Conseguimos definir o espaço a ser ocupado pela sessão de destaques em nosso template.

Sobre o curso CSS Grid: simplificando layouts

O curso CSS Grid: simplificando layouts possui 108 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas