https://github.com/rocketseat-content/youtube-desvendando-css-grid
Project created for the video about CSS Grid
https://github.com/rocketseat-content/youtube-desvendando-css-grid
css grid youtube
Last synced: about 1 year ago
JSON representation
Project created for the video about CSS Grid
- Host: GitHub
- URL: https://github.com/rocketseat-content/youtube-desvendando-css-grid
- Owner: rocketseat-content
- Created: 2019-08-08T13:50:41.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-15T15:53:23.000Z (almost 7 years ago)
- Last Synced: 2025-03-31T10:38:21.490Z (over 1 year ago)
- Topics: css, grid, youtube
- Language: HTML
- Homepage: https://www.youtube.com/watch?v=HN1UjzRSdBk
- Size: 6.84 KB
- Stars: 206
- Watchers: 10
- Forks: 90
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS GRID
## GRID
- Bimensional
- Divisão de toda a página em linhas e colunas
- Colocar elementos onde quiser nessa divisão
---
## GRID OU FLEXBOX
- Grid: Duas dimensões (colunas e linhas)
- Flexbox: Uma dimensão (ou coluna ou linha)
- Um complementa o trabalho do outro
- Verificar quais navegadores ainda não estão aceitando o Grid
---
## PROPRIEDADES
Vamos separar em 2 grupos:
`container` e `item(s)`
---
### CONTAINER
- display: grid;
- grid-template-columns;
- grid-template-rows;
- grid-gap
- grid-row-gap
- grid-column-gap
- grid-template-areas;
... e mais 4 propriedades e [**alinhamento**!](https://github.com/Rocketseat/youtube-desvendando-css-grid/blob/master/Alinhamento.md)
---
## ITEM(s)
- grid-column
- grid-column-start
- grid-column-end
- grid-row
- grid-row-start
- grid-row-end
- grid-area
... e mais 2 propriedades de [**alinhamento**!](https://github.com/Rocketseat/youtube-desvendando-css-grid/blob/master/Alinhamento.md)