Liberte o Poder do CSS Grid para Apresentações Cativantes de Serviços para Animais de Estimação

Introdução

Em "Pet's House", um reino virtual para entusiastas de animais de estimação, Alex, um desenvolvedor web, embarca em uma jornada para renovar a apresentação de seus serviços usando CSS Grid.

Este laboratório visa cativar os usuários, apresentando os serviços de forma organizada e visualmente atraente. A missão de Alex é transformar a seção "Display" em um layout de grade que destaque os serviços para animais de estimação com elegância e eficiência.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 88%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Propriedade Position

A propriedade CSS position é uma ferramenta poderosa que permite aos desenvolvedores controlar o posicionamento exato dos elementos em uma página. Ela permite que os elementos sejam posicionados com base em seu fluxo normal, em relação ao seu elemento pai, em relação à janela de visualização (viewport) ou em relação ao seu ancestral de rolagem mais próximo.

Posicionamento Estático (Static Positioning)

static é o valor padrão para todos os elementos, o que significa que os elementos são dispostos de acordo com o fluxo normal do documento. Elementos posicionados estaticamente não são afetados pelas propriedades top, right, bottom ou left.

Quando você deseja que os elementos sigam o fluxo padrão, o posicionamento estático é a melhor escolha.

Por exemplo, há uma imagem de um robô no lado esquerdo da página, e se definirmos este elemento como position:static, então, ao rolar a página, esta imagem também rolará com o fluxo da página.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .full-page-img {
        width: 100%;
        margin-left: 15%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: static;
        top: 100px;
        left: 0;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>

Posicionamento Fixo (Fixed Positioning)

O posicionamento fixed posiciona um elemento em relação à janela de visualização (viewport) do navegador. O elemento permanecerá no mesmo lugar, mesmo que a página role.

Para criar uma barra de navegação que seja fixa na parte superior ou inferior da página.

Por exemplo, há uma imagem de um robô no lado esquerdo da página, se definirmos este elemento como position:fixed, então, ao rolar a página, esta imagem não desaparecerá por causa da rolagem da página, a imagem estará em uma posição fixa.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .full-page-img {
        width: 100%;
        margin-left: 15%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <img src="robot.png" class="ad-l" />
    <div class="full-page-img">
      <img src="page.png" />
    </div>
  </body>
</html>

Posicionamento Relativo (Relative Positioning)

O posicionamento relative permite que você desloque um elemento em relação à sua posição normal. Mesmo que deslocado, o elemento ainda ocupa seu espaço original.

Quando você precisa ajustar ligeiramente a posição de um elemento sem afetar outras partes do layout.

Por exemplo, movemos a imagem do robô no lado esquerdo da página por um número definido de pixels nas direções top e left em relação à sua posição normal.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: relative;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>

Posicionamento Absoluto (Absolute Positioning)

O posicionamento absolute faz com que um elemento seja posicionado em relação ao seu ancestral posicionado mais próximo, se houver, ou, caso contrário, em relação ao bloco de contenção inicial. Ele é removido do fluxo do documento e não ocupa espaço.

Quando você precisa criar um elemento flutuante, como um modal ou um menu suspenso.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .box img {
        width: 90%;
      }
      .ad-l {
        position: absolute;
        top: 70px;
        left: 70px;
      }
    </style>
  </head>
  <body>
    <img src="labby.png" class="ad-l" />
    <div class="box">
      <img src="page.png" />
    </div>
  </body>
</html>

Depois de entender o uso do atributo position, podemos adicionar o seguinte ao style.css:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li {
  position: relative;
  display: inline-block;
}
.service figure {
  position: relative;
}
.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

✨ Verificar Solução e Praticar

Grid Básico

No laboratório anterior, aprendemos sobre Flexbox, mas o layout da página de animais de estimação ainda não atingiu o efeito desejado, então, vamos estudar outro layout - Grid Layout.

CSS Grid Layout (Grid) é um sistema de layout baseado em grade que permite aos desenvolvedores criar layouts de páginas web responsivos. Grid pode dividir páginas em regiões principais ou definir o layout de componentes menores.

Para usar o layout Grid, você primeiro precisa definir a propriedade display: grid; em um elemento container. Podemos adicionar o seguinte ao style.css:

.container {
  display: grid;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  margin: 20px auto;
}

✨ Verificar Solução e Praticar

Definindo Linhas e Colunas

Em seguida, use as propriedades grid-template-columns e grid-template-rows para definir as linhas e colunas no container.

Por exemplo, .container configura um modo de exibição de grade com dimensões específicas para colunas e linhas:

display: grid; ativa o layout de grade para o container.
grid-template-columns: 50px 100px; define duas colunas, onde a primeira coluna tem 50 pixels de largura e a segunda coluna tem 100 pixels de largura.
grid-template-rows: 30px 60px; define duas linhas, onde a primeira linha tem 30 pixels de altura e a segunda linha tem 60 pixels de altura.

Podemos adicionar o seguinte ao style.css:

.container {
  display: grid;
  grid-template-columns: 100%;
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  margin: 20px auto;
}

O fr é uma unidade de comprimento flexível, representando uma fração do espaço disponível no container da grade.

✨ Verificar Solução e Praticar

Grid Gap (Espaçamento da Grade)

A propriedade grid-gap (agora recomendado usar gap, row-gap e column-gap) pode definir o espaço entre as linhas e colunas da grade.

Podemos adicionar o seguinte ao style.css:

.services {
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: 5%;
  margin: 20px auto;
}

✨ Verificar Solução e Praticar

Resumo

Neste laboratório, Alex utilizou com sucesso o CSS Grid para redesenhar a seção de exibição "Pet's House", mostrando os serviços para animais de estimação em um layout de grade estruturado e atraente. Essa abordagem não apenas melhorou a apresentação visual, mas também demonstrou a flexibilidade e o poder do CSS Grid no design web.

Apresentação de Serviços para Animais de Estimação com CSS Grid

Introdução

Propriedade Position

Posicionamento Estático (Static Positioning)

Posicionamento Fixo (Fixed Positioning)

Posicionamento Relativo (Relative Positioning)

Posicionamento Absoluto (Absolute Positioning)

Grid Básico

Definindo Linhas e Colunas

Grid Gap (Espaçamento da Grade)

Resumo