/Grid-CSS

:rocket: Site clone Instagram

Primary LanguageCSSMIT LicenseMIT

📚 Estudos do Grid CSS ⚙️

O intuito desse estudo foi aprofundar o conhecimento sobre Grid CSS. Foi utilizado como base os canais CFB Cursos e Professor Miltin e outras fontes no youtube.

📒 Conceitos básicos de Grid Layout

🔹 Um recurso do css que permite desenvolver layouts em grid;
🔹 É um valor da propriedade display;
🔹 Os grids são divididos em colunas e linhas;
🔹 Os recursos do flex-box podem ser usados em grid;
🔹 O container controla a disposição dos itens, mas os itens também podem alterar o seu posicionamento;

📋 Tabela de conteúdo


📦 Propriedades Grid Container

✔️ Display grid;
✔️ Grid-template-columns;
✔️ Grid-template-rows;
✔️ Grid-template-areas;
✔️ Grid-column-gap;
✔️ Grid-row-gap;
✔️ Grid-gap;

📝 Propriedades Grid Items

✔️ Grid-column-start;
✔️ Grid-column-end;
✔️ Grid-column;
✔️ Grid-row-start;
✔️ Grid-row-end;
✔️ Grid-row;
✔️ Grid-area;
✔️ Justify-self;
✔️ Align-self;


🔓 Quer destravar os comandos básicos❓🗝️


gif-grid-readme

🔎 Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: :octocat: Git e um editor de código VS Code.

    # Clone este repositório
    $ git clone https://github.com/FabioFlorencio/Grid-CSS.git
	
    #Acesse a pasta do projeto no terminal/cmd