Expert Class - Como utilizar CSS GRID

Expert Class - Como utilizar CSS GRID

Expert Class CSS grid

Acesse o vídeo de explicação do conteúdo: Youtube

O que é?

  • É uma forma de organizar e manipular partes do meu site de forma inteligente via css
  • Outra exemplo seria o flexbox onde consegue dar um resultado parecido com o grid.

Começando a entender o Grid

  • Grid Container:
    • Contêiner que envolve o conteúdo de uma sessão ou parte do site
  • Grid Item:
    • Item que esta dentro do contêiner
  • Exemplo: Grid 3x3

Por onde começo?

  • Tenha um projeto onde quer aplicar ou crie um do zero assim comigo:

    npx create-next-app@latest --typescript
    
  • Entre na pasta do projeto utilizando um terminal e rode o projeto com:

    npm run dev
    
  • Pronto já temos um projeto rodando, agora vamos limpar ele para criar nossa pagina de aprendizado:

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>
          CSS Grid
        </title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main></main>
    </div>
  );
};

export default Home;

Se você já tem um projeto para aplicar o que vamos estudar, ótimo, vamos lá.

Grid Container

Agora vamos entender os principais atributos que temos para um grid container

  • display

    display:grid;
    
  • grid-template-columns

/* Define a quantidade de colunas na sua grid */

grid-template-columns: 1fr 2fr; 
/* fr é unidade fracional */

grid-template-column: repeat(3, 1fr); 
/* Repete 3 colunas de tamanhos iguais*/

grid-template-column: repeat(auto-fit, minmax(100px,auto));
/* Cria colunas com no minimo 100px largura automaticamente */
  • grid-template-rows
/* Define a quantidade de linhas na sua grid */

grid-template-rows: 1fr 2fr
/* Cria 2 linhas, sendo a segunda 2x maior que a primeira */
  • grid-template-areas
/* Define areas especificas dentro do grid */

grid-template-areas:
"menu menu menu"
"sidemenu body body"
"sidemenu footer footer"
/* Cria 3 linhas e 3 colunas, sendo na peimira linha o menu predominante, na linha 2 tendo o menu e body(2x) e na linha 3 tendo ainda o menu e o footer - Use o grid-area: blabla*/
  • gap
/* Define o espaço entre os itens da grid */

gap: 10px;
/* Define 10px entre os itens (linhas e coluna) */

column-gap: 30px;
/* Define apenas entre as colunas 30px */

row-gap: 10px;
/* Define apenas entre as linhas 10px */
  • justify-content
/* Alinha os itens da grid horizontalmente */

justify-content: space-between;
/* Alinha criando espaço entre os itens */

justify-content: center;
/* Alinha no centro */

justify-content: start;
/* Alinha no inicio */

justify-content: end;
/* Alinha no fim */
  • align-content
/* Alinha os itens da grid verticalmente */

align-content: space-between;
/* Alinha criando espaço entre os itens */

align-content: center;
/* Alinha no centro */

align-content: start;
/* Alinha no inicio */

align-content: end;
/* Alinha no fim */
  • justify-items
/* Alinha o conteudo dos itens da grid horizontalmente */

justify-items: space-between;
/* Alinha criando espaço entre os itens */

justify-items: center;
/* Alinha no centro */

justify-items: start;
/* Alinha no inicio */

justify-items: end;
/* Alinha no fim */
  • align-items
/* Alinha o conteudo dos itens da grid verticalmente */

align-items: space-between;
/* Alinha criando espaço entre os itens */

align-items: center;
/* Alinha no centro */

align-items: start;
/* Alinha no inicio */

align-items: end;
/* Alinha no fim */

Grid Item

Agora vamos entender os principais atributos temos para os grid items

  • grid-column
/* Define quais colunas o item vai ocupar, podendo colocar inicio e fim(colunas e linhas) */

grid-column: 2;
/* Ocupara a coluna 2 */

grid-column: 1/3;
/* Ocupara a coluna 1 e 2 (sim 1 e 2 mesmo) */

grid-column-start: 1;
/* O item comecara na coluna 1 */

grid-column-end: 2;
/* Item terminara na coluna 2 */

grid-column: span 2;
/* Item vai ocupar duas colunas de onde estiver */
  • grid-row
/* Define quais linhas o item vai ocupar, podendo colocar inicio e fim(colunas e linhas) */

grid-row: 2;
/* Ocupara a linha 2 */

grid-row: 1/3;
/* Ocupara a linha 1 e 2 (sim 1 e 2 mesmo) */

grid-row-start: 1;
/* O item comecara na linha 1 */

grid-row-end: 2;
/* Item terminara na linha 2 */

grid-row: span 2;
/* Item vai ocupar duas linhas de onde estiver */
  • grid-area
/* Define onde o item tem que aparecer */

grid-area: menu;
/* Posiciona esse item no lugar do menu na grid */
  • justify-self
/* Alinha o conteudo horizontalmente */

justify-self: start;
/* Alinha no inicio */

justify-self: end;
/* Alinha no fim */

justify-self: center;
/* Alinha no centro */
  • align-self
/* Alinha o conteudo verticalmente */

align-self: start;
/* Alinha no inicio */

align-self: end;
/* Alinha no fim */

align-self: center;
/* Alinha no centro */

Por fim é isso, espero que ajude você a dar um passo a mais na carreira, se quiser ver nosso vídeo explicativo sobre esse conteúdo acesse aqui:%[youtu.be/nqXRMsrYhTM]