https://github.com/emanuelsacoman/gridlayout

Utilizando CSS Grid para fazer um layout responsivo e moderno.
https://github.com/emanuelsacoman/gridlayout

css-grid html5 responsive-layout tutorial

Last synced: 7 months ago
JSON representation

Utilizando CSS Grid para fazer um layout responsivo e moderno.

• Host: GitHub
• URL: https://github.com/emanuelsacoman/gridlayout
• Owner: emanuelsacoman
• Created: 2024-12-31T00:30:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-10T00:27:18.000Z (about 1 year ago)
• Last Synced: 2025-03-15T14:13:16.204Z (11 months ago)
• Topics: css-grid, html5, responsive-layout, tutorial
• Language: CSS
• Homepage: https://cssgridlayout.netlify.app
• Size: 256 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.MD

Awesome Lists containing this project

README

          

# Grid Layout ⊞⊞⊞

Grid é um tipo de **display** do css, assim como o **flex**, serve para manipular o layout da página web, o diferencial é que, com o grid, podemos transformar nossa página em vários quadrados e neles atribuir espaços específicos, como HEADER, FOOTER, etc...

Com esse método, podemos utilizar a responsividade de uma forma única e didática.

> Tela grande

![Página 1](./images/page1.png)

> Tablet

![Página 2](./images/page2.png)

> Celular

![Página 3](./images/page3.png)

Para quem está acostumado a utilizar o flex, pode estranhar a maneira como o grid é utilizado. Em casos específicos, o grid segue com vantagem, principalmente quando precisamos criar layouts mais complexos e alinhamentos precisos. A utilização de grid pode ser extremamente poderosa. Ele permite que você crie interfaces de usuário altamente responsivas e bem estruturadas, tal como o flex, porém em situações específicas.

![Css](./images/code.png)

Não se esqueça de deixar uma ⭐ nesse repositório!