Css Flexbox e Grid

 

Olá! Vamos falar sobre Flexbox e Grid no CSS.

Flexbox e Grid são sistemas de layout disponíveis no CSS que ajudam a criar layouts responsivos e flexíveis para as páginas web.

O Flexbox é um modelo de layout que organiza os elementos em uma linha ou coluna, permitindo que os itens sejam distribuídos e alinhados de forma flexível. Isso torna mais fácil alinhar e distribuir elementos em um contêiner, permitindo uma fácil adaptação a diferentes tamanhos de tela.

Já o Grid é um sistema de layout bidimensional que divide uma página em linhas e colunas, permitindo que os elementos sejam posicionados em qualquer célula do grid. Isso permite a criação de layouts mais complexos e estruturados, facilitando a organização de conteúdo em uma página.

Abaixo, temos um exemplo simples de uso do Flexbox:

html
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

css
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}

Nesse exemplo, estamos criando um contêiner flexível e distribuindo três itens igualmente ao longo dele, deixando um espaço igual entre cada item.

Já no exemplo abaixo, temos um uso simples do Grid:

html
<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
</div>

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}

Nesse exemplo, estamos criando um grid de seis itens distribuídos em três colunas e duas linhas, com um espaço de 10 pixels entre cada item.

Esses são apenas exemplos simples do uso do Flexbox e Grid, mas ambos possuem muitas outras propriedades e recursos que permitem a criação de layouts complexos e responsivos para as páginas web.