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: 6 days 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-15T15:53:23.000Z (over 5 years ago)
• Last Synced: 2024-12-27T00:08:14.150Z (14 days ago)
• Topics: css, grid, youtube
• Language: HTML
• Homepage: https://www.youtube.com/watch?v=HN1UjzRSdBk
• Size: 6.84 KB
• Stars: 206
• Watchers: 11
• 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)