Grid
O Grid é um sistema de layout avançado do CSS que permite criar designs de página complexos e flexíveis.
Ele é como uma grade bidimensional que organiza elementos em colunas e linhas, permitindo um controle preciso sobre o posicionamento e o dimensionamento desses elementos.
Vamos utilizar uma analogia para entender o Grid. Imagine que você está planejando o layout de uma cozinha.
O Grid seria como uma grade de referência na qual você pode organizar os diferentes elementos da cozinha, como pias, armários e eletrodomésticos.
Em um layout de Grid, definimos um contêiner que contém todos os elementos que queremos organizar. Esse contêiner seria a área da cozinha em nossa analogia.
Dentro do contêiner, criamos colunas e linhas que funcionam como as grades da cozinha, permitindo que posicionemos os elementos de forma precisa.
Aqui estão os principais conceitos do Grid:
- display: grid;: Essa propriedade é aplicada ao contêiner e ativa o Grid. É como instalar uma grade na área da cozinha para organização.
- grid-template-columns e grid-template-rows: Essas propriedades definem as colunas e linhas da grade. Podemos especificar o tamanho de cada coluna/linha usando valores fixos, como 200px, ou proporcionais, como 1fr (fração do espaço disponível). É como determinar o tamanho e a quantidade de grades horizontais e verticais na cozinha.
- grid-gap: Essa propriedade define o espaçamento entre as células da grade. Podemos especificar um valor em pixels ou outras unidades de medida. É como adicionar espaçamento entre as grades da cozinha.
- grid-column e grid-row: Essas propriedades controlam a localização e o tamanho dos elementos dentro da grade, permitindo que ocupem várias células. Podemos definir o número da coluna ou linha onde o elemento deve começar e terminar. É como posicionar cada elemento da cozinha dentro das células da grade, indicando em qual coluna/linha eles devem começar e terminar.
- grid-area: Essa propriedade permite nomear e agrupar células específicas para criar áreas personalizadas dentro da grade. É como criar áreas delimitadas na cozinha para a pia, armários, fogão, etc.
Esses são apenas alguns dos conceitos básicos do Grid. Com o Grid, temos um controle poderoso sobre o layout da página, permitindo a criação de designs flexíveis e responsivos.
Para melhorar a explicação vamos criar um exemplo simples para ilustrar o uso do Grid. Vamos imaginar uma página com um cabeçalho, uma barra lateral e uma seção de conteúdo principal, todos organizados em uma grade.
HTML:
<div class="grid-container"> <header class="item">Cabeçalho</header> <aside class="item">Barra lateral</aside> <section class="item">Conteúdo principal</section> </div>
CSS:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr;
grid-gap: 10px;
}
.item {
background-color: #e91e63;
color: #fff;
padding: 10px;
}
Nesse exemplo, temos um contêiner com a classe “grid-container” que contém um cabeçalho, uma barra lateral e uma seção de conteúdo principal.
A propriedade display: grid; aplicada ao contêiner ativa o Grid.
As propriedades grid-template-columns e grid-template-rows definem a estrutura da grade. Nesse caso, temos duas colunas, sendo a primeira com largura fixa de 200px e a segunda ocupando o restante do espaço disponível (1fr).
Também temos duas linhas, sendo a primeira com altura fixa de 100px e a segunda ocupando o restante do espaço (1fr).
A propriedade grid-gap define o espaçamento entre as células da grade, que no exemplo é de 10 pixels.
As classes “.item” são aplicadas aos elementos individuais (cabeçalho, barra lateral e conteúdo principal) e definem a cor de fundo, a cor do texto e o espaçamento interno.
Com esse exemplo, você verá que os elementos serão organizados em uma grade com duas colunas e duas linhas.
O cabeçalho ocupará a primeira linha e se estenderá pelas duas colunas, a barra lateral ocupará a primeira coluna e a seção de conteúdo principal ocupará a segunda coluna e a segunda linha.
Experimente alterar as propriedades da grade, como o número de colunas, a largura das colunas, o número de linhas e a altura das linhas, para ver como o Grid se adapta e reorganiza os elementos de acordo com as mudanças.
Em resumo, o Grid é um sistema de layout CSS que permite organizar elementos em uma grade bidimensional.
É como usar uma grade de referência para organizar os elementos de uma cozinha de forma precisa. Com as propriedades do Grid, podemos definir colunas, linhas, espaçamentos e posicionar elementos em células específicas, criando layouts complexos e flexíveis para páginas da web.
Nesse momento você aprendeu os fundamentos do Grid CSS e como criar layouts complexos, é hora de colocar suas habilidades em prática com um emocionante exercício do módulo.
