https://github.com/zaikoxander/css-grid
Estudo de CSS Grid https://youtu.be/HN1UjzRSdBk
https://github.com/zaikoxander/css-grid
css grid html
Last synced: 3 months ago
JSON representation
Estudo de CSS Grid https://youtu.be/HN1UjzRSdBk
- Host: GitHub
- URL: https://github.com/zaikoxander/css-grid
- Owner: ZaikoXander
- Created: 2022-10-07T17:15:35.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-07T17:16:24.000Z (about 3 years ago)
- Last Synced: 2025-09-05T21:53:21.754Z (4 months ago)
- Topics: css, grid, html
- Language: CSS
- Homepage: https://zaikoxander.github.io/css-grid/src
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS GRID
## GRID
- Bidimensional
- 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**
---
### 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**