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:
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]