Grid e Grid Columns 1Vers2o para Audiobook3

Anotacoes

Grid e Grid Columns (Versão para Audiobook) Vamos falar sobre o sistema Grid no CSS. Quando você usa o comando display: grid, você transforma um elemento em um contêiner de grade, onde pode organizar os elementos internos em linhas e colunas. 📌 Importante: sempre use esse comando no elemento que envolve os itens que você quer organizar. --- 🔹 Grid-template-columns Por padrão, o grid começa com apenas uma coluna. Para adicionar mais colunas e definir seus tamanhos, usamos: grid-template-columns. Você pode usar valores fixos como duzentos pixels, porcentagens ou a unidade fr, que significa fração do espaço disponível. Exemplos: um fr um fr → cria duas colunas com o mesmo tamanho. um fr dois fr → cria duas colunas, onde a segunda é o dobro da primeira. --- 🔹 Unidade fr A unidade fr é usada para dividir o espaço restante igualmente entre as colunas. É útil quando você quer que os elementos tenham o mesmo tamanho ou proporções definidas. --- 🔹 Gap O comando gap é usado para criar espaçamento entre os itens do grid – tanto na vertical quanto na horizontal. Você pode definir esse espaço com valores em pixels, como por exemplo: gap: vinte pixels. Isso significa q...