Desata el poder de CSS Grid para presentaciones cautivadoras de servicios para mascotas

Introducción

En "Pet's House", un mundo virtual para los entusiastas de las mascotas, Alex, un desarrollador web, emprende la misión de renovar su exposición de servicios utilizando CSS Grid.

Este laboratorio tiene como objetivo cautivar a los usuarios al presentar los servicios de manera organizada y visualmente atractiva. La misión de Alex es transformar la sección "Display" en un diseño de cuadrícula que destaque los servicios para mascotas con elegancia y eficiencia.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") subgraph Lab Skills css/box_model -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} css/margin_and_padding -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} css/width_and_height -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} css/display_property -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} css/positioning -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} css/grid_layout -.-> lab-289077{{"Presentación de servicios para mascotas con CSS Grid"}} end

Propiedad position

La propiedad CSS position es una herramienta poderosa que permite a los desarrolladores controlar la ubicación exacta de los elementos en una página. Permite que los elementos se ubiquen según su flujo normal, en relación con su elemento padre, en relación con la vista previa o en relación con su ancestro de desplazamiento más cercano.

Posicionamiento estático

static es el valor predeterminado de todos los elementos, lo que significa que los elementos se colocan de acuerdo con el flujo normal del documento. Los elementos con posicionamiento estático no se ven afectados por las propiedades top, right, bottom o left.

Cuando quieres que los elementos sigan el flujo estándar, el posicionamiento estático es tu mejor opción.

Por ejemplo, hay una imagen de un robot en el lado izquierdo de la página, y si establecemos este elemento en position:static, entonces cuando desplazamos la página, esta imagen también se desplazará con el flujo de la 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>

Posicionamiento fijo

El posicionamiento fixed coloca un elemento en relación con la vista previa de la ventana del navegador. El elemento permanecerá en el mismo lugar incluso si la página se desplaza.

Para crear una barra de navegación que se fije en la parte superior o inferior de la página.

Por ejemplo, hay una imagen de un robot en el lado izquierdo de la página, si establecemos este elemento en position:fixed, entonces cuando desplazamos la página, esta imagen no desaparecerá debido al desplazamiento de la página, la imagen estará en una posición fija.

<!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>

Posicionamiento relativo

El posicionamiento relative te permite desplazar un elemento en relación con su posición normal. Incluso si se desplaza, el elemento todavía ocupa su espacio original.

Cuando necesitas ajustar ligeramente la posición de un elemento sin afectar a otras partes del diseño.

Por ejemplo, movemos la imagen del robot en el lado izquierdo de la página un número determinado de píxeles en las direcciones top y left en relación con su posición 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>

Imagen del robot con posicionamiento relativo

Posicionamiento absoluto

El posicionamiento absolute hace que un elemento se posicione en relación con su ancestro posicionado más cercano, si lo hay, o de lo contrario en relación con el bloque de contención inicial. Se elimina del flujo del documento y no ocupa espacio.

Cuando necesitas crear un elemento flotante, como un modal o un menú desplegable.

<!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>

Una vez que entiendes el uso del atributo position, podemos agregar lo siguiente a 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;
}

✨ Revisar Solución y Practicar

Básico de Grid

En el laboratorio anterior, aprendimos Flexbox, pero el diseño de la página de mascotas no logró el efecto que queríamos. Entonces, en el siguiente estudio, aprenderemos otro diseño: Grid Layout.

El CSS Grid Layout (Grid) es un sistema de diseño basado en cuadrículas que permite a los desarrolladores crear diseños de páginas web responsivas. Grid puede dividir las páginas en regiones principales o definir el diseño de componentes más pequeños.

Para usar el diseño de Grid, primero debes establecer la propiedad display: grid; en un elemento contenedor. Podemos agregar lo siguiente a style.css:

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

✨ Revisar Solución y Practicar

Definiendo filas y columnas

A continuación, utiliza las propiedades grid-template-columns y grid-template-rows para definir las filas y columnas en el contenedor.

Por ejemplo,.container configura un modo de visualización de cuadrícula con dimensiones específicas para columnas y filas:

display: grid; activa el diseño de cuadrícula para el contenedor.
grid-template-columns: 50px 100px; define dos columnas donde la primera columna tiene un ancho de 50 píxeles y la segunda columna tiene un ancho de 100 píxeles.
grid-template-rows: 30px 60px; define dos filas donde la primera fila tiene una altura de 30 píxeles y la segunda fila tiene una altura de 60 píxeles.

Visualización del ejemplo de diseño de cuadrícula

Podemos agregar lo siguiente a 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;
}

El fr es una unidad de longitud flexible, que representa una fracción del espacio disponible en el contenedor de cuadrícula.

✨ Revisar Solución y Practicar

Espaciado entre celdas de la cuadrícula

La propiedad grid-gap (ahora se recomienda usar gap, row-gap y column-gap) puede establecer el espacio entre las filas y columnas de la cuadrícula.

Podemos agregar lo siguiente a style.css:

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

✨ Revisar Solución y Practicar

Resumen

En este laboratorio, Alex utilizó con éxito CSS Grid para rediseñar la sección de visualización de "La Casa de las Mascotas", mostrando los servicios para mascotas en un diseño de cuadrícula estructurado y atractivo. Este enfoque no solo mejoró la presentación visual, sino que también demostró la flexibilidad y el poder de CSS Grid en el diseño web.