https://github.com/edijunior88/freecodecamp_css_grid
Nesse curso, você aprenderá os fundamentos do CSS Grid construindo diferentes layouts complexos, incluindo um blog.
https://github.com/edijunior88/freecodecamp_css_grid
css css-grid css-grid-layout css3
Last synced: 3 months ago
JSON representation
Nesse curso, você aprenderá os fundamentos do CSS Grid construindo diferentes layouts complexos, incluindo um blog.
- Host: GitHub
- URL: https://github.com/edijunior88/freecodecamp_css_grid
- Owner: EdiJunior88
- License: mit
- Created: 2022-10-12T13:49:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T17:05:37.000Z (about 1 year ago)
- Last Synced: 2025-01-22T19:24:06.808Z (5 months ago)
- Topics: css, css-grid, css-grid-layout, css3
- Language: HTML
- Homepage:
- Size: 49.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FreeCodeCamp
CSS Grid
O CSS Grid é um padrão mais recente, que torna fácil construir layouts responsivos complexos. Ele funciona transformando um elemento HTML em uma grade e permite que você coloque elementos filhos em qualquer lugar dentro dele.
Nesse curso, você aprenderá os fundamentos do CSS Grid construindo diferentes layouts complexos, incluindo um blog.
- Criar seu primeiro grid
- Criar colunas com grid-template-columns
- Criar linhas com grid-template-rows
- Usar unidades específicas de grid para alterar o tamanho de colunas e linhas
- Criar um espaçamento entre colunas usando grid-column-gap
- Criar um espaçamento entre linhas usando grid-row-gap
- Criar espaçamentos com grid-gap
- Usar grid-column para controlar a posição das colunas
- Usar grid-row para controlar a posição das linhas
- Alinhar um item horizontalmente usando justify-self
- Alinhar um item verticalmente usando align-self
- Alinhar todos os itens horizontalmente usando justify-items
- Alinhar todos os itens verticalmente usando align-items
- Dividir o grid em áreas
- Definir a posição dos itens usando a propriedade grid-area
- Usar grid-area sem criar um modelo de áreas
- Reduzir repetição usando a função repeat
- Limitar o tamanho do item usando a função minmax
- Criar layouts flexíveis usando auto-fill
- Criar layouts flexíveis usando auto-fit
- Usar media queries para criar layouts responsivos
- Criar grids dentro de grids
Tecnologias Utilizadas
Para ver todas as tecnologias [clique aqui](/techstack.md)
Tempo Estudando o Curso
