Layouts CSS con Pocas Líneas de Código

Clase 15 de 28 • Curso de Diseño Web con CSS Grid y Flexbox

Resumen

¿Cómo se pueden construir layouts avanzados con CSS Grid?

La construcción de layouts avanzados en CSS Grid puede parecer un desafío, pero con el uso adecuado de las propiedades y funciones disponibles, es posible crear diseños sofisticados con pocas líneas de código. A través de ejemplos específicos, como el grid de 12 columnas o la función auto-fit, es posible aumentar la flexibilidad y adaptabilidad de los diseños a diferentes tamaños de pantalla. A continuación, desglosamos algunos métodos clave para lograr estos layouts.

¿Qué es 12-span-grid?

El layout "12-span-grid" se refiere a una rejilla dividida en 12 columnas, que es un estándar común para muchos sistemas de diseño. Se puede construir usando la propiedad grid-template-columns de CSS Grid conjuntamente con la función repeat. Esta técnica permite definir cuántas columnas se desean y su tamaño:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

Propiedad grid-template-columns: Define cuántas columnas tiene la rejilla y su tamaño.
Función repeat: Simplifica la creación de múltiples columnas de igual tamaño.

Este layout es útil para mantener un diseño consistente sin importar la variación en el tamaño de la pantalla, lo que elimina la necesidad de múltiples breakpoints en media queries.

¿Qué es RAM en CSS Grid?

El concepto de "RAM" en CSS Grid se refiere al uso de la propiedad grid-template-columns junto con la función auto-fit. Esta combinación maximiza el uso del espacio disponible, creando una grid adaptable:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

auto-fit: Extiende las columnas para llenar el espacio disponible.
minmax: Fija un tamaño mínimo y máximo para las columnas.

Este enfoque permite que la grid se ajuste automáticamente al contenido y al tamaño del contenedor, asegurando que el diseño sea siempre legible y funcional.

¿Cómo usar justify-content-space-between con Flexbox o CSS Grid?

La propiedad justify-content: space-between se puede aplicar en Flexbox y en CSS Grid para distribuir elementos de manera uniforme con espacios entre ellos:

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

Flexbox: Ideal para distribuir elementos en línea o en un contenedor ajustable.
CSS Grid: Ofrece un control más detallado sobre la distribución en un diseño bidimensional.

Esta técnica es útil para mantener un espacio visual atractivo y evitar trucos complejos que se usaban anteriormente, como flotantes o columnas falsas.

¿Qué es la proporción de aspecto en imágenes y videos?

La propiedad aspect-ratio en CSS se utiliza para mantener las proporciones correctas en imágenes y videos, asegurando que éstos se adapten sin distorsionarse:

img {
  aspect-ratio: 16 / 9;
}

aspect-ratio: Define la relación entre el ancho y el alto de un elemento.
Relaciones comunes: 16:9 es una de las proporciones más utilizadas en la web.

Esta propiedad es esencial para crear un diseño visualmente consistente, especialmente cuando se presenta contenido multimedia.

¿Qué recursos adicionales son recomendables?

Una referencia invaluable es una serie de recursos creados por la desarrolladora Iuna. Ella ha explorado cómo conseguir diversos layouts de CSS con una sola línea de código, publicando tanto charlas como documentación escrita que ayuda a entender cuándo y cómo usar estas técnicas de manera efectiva. Te recomiendo explorar estos recursos para profundizar en las técnicas mencionadas y potenciar tus habilidades en diseño web.

Siguiendo estas orientaciones y explorando las últimas herramientas y funciones de CSS, podrás construir layouts innovadores y adaptativos que se vean bien en cualquier dispositivo. No dudes en experimentar y adaptar estos métodos en tus propios proyectos. ¡Sigue adelante, el mundo del CSS es vasto y lleno de oportunidades para la creatividad!

matias bravo

student•

llevo 15 clases y siento que no aprendi nada distinto a las cursos anteriores :(

David Aguilera

student•

lamentablemente estoy de acuerdo contigo. siento que es mucha teoria pero nada de practica. respeto mucho a teffcode, pero este mismo curso de leonidas era otro nivel. de verdad. que lastima

Laura Roa

student•

Si es la repeticion de la repetidera

Carlos Eduardo Gomez García

teacher•

Wow!!! No sabía que ya existía el apect ratio, yo seguía usando el truco este del padding para mantener una relación:( . Es increíble que hay muchas cosas chulas con CSS que lamentablemente aún no son estándar:( .

Joseph Manuel Salen Pantoja

student•

Bueno en estos dos meses ha subido de 41% a 65% XD

Obed Paz

student•

jajajaj es verdad yo seguia con el truquito del padding tambien 🤣 Pero como dice Joseph, yo igual acabo de revisar y ya va mejorando la compatibilidad. 😉

Armando Bringas

student•

Como comentario, espero sirva de feedback; el contenido del curso es muy bueno y no dudo para nada los conocimientos de la profesora pero creo que para la mayoría se hace pesado seguir el curso de esta manera por que la práctica de código es creo que un 10% y el resto solo va contando lo que hace el código, en lo personal se me hace muy difícil seguir el curso si no veo que es lo que está sucediendo. Sin embargo el contenido y la información es buenísima solo sugiero que debería ser llevado de manera más práctica.

Emerson David Cabrera Salas

student•

Es cierto lo que dices, hay valiosa información, pero demasiada teoría puede llegar a ser aburridor y monótono. La práctica te activa, despierta tu interés, tu curiosidad, se echa de menos.

Hugo Alejandro Franco López

student•

Cada vez estoy más seguro de lo malos ue son los cursos con Estefany Aguilar

Fernando Molano Castrillón

student•

Todos los diseños mostrados en los ejemplos los pueden encontrar en la siguiente web explicados a detalle: https://web.dev/one-line-layouts/

Olga Acosta Bravo

student•

Muy interesante y completa la teoría, pero para aprender realmente lo práctico quedará buscar algún ejemplo en Youtube.

Hasta ahora y tampoco en el curso anterior a este se ha hecho una práctica con una página real usando CSS Grid y poder tomar ese ejemplo para crear cosas por cuenta propia. Tristik. :sleepy:

Brandon Argel Verdeja Domínguez

student•

Mary Rojas

student•

Excelente :) gracias!

Luis Alejandro Vera Hernandez

student•

Gracias!

Arturo Flores

student•

Yo vengo en orden tomando los cursos en la Escuela de Desarrollo Web. Si bien, este curso sí es muy teórico. Ya he pasado por otros prácticos con el profe Diego y con la Profesora Estefany Salas. Este curso me está ayudando a despejar dudas que tenia y tener otro tipo de conocimientos. Si ocupo practicar, solo reviso algunos ejemplos que muestra la profesora y ya lo pongo en práctica y eso me ha ayudado muchísimo, porque de eso trata, de practicar y resolver.

Francis Alamo Moreno

student•

El curso tiene mucha información teórica, es difícil para mi comprender sin ejercicios. Deberían agregar ejercicios, es necesario practicar. Le daré otra oportunidad, sino, me cambio de curso.

Gonzalo Ceron Denetro

student•

Hice una colección en codepen de algunos layouts, por si quieren ver el código Codepen

Miguel Angel Reyes Moreno

student•

Espero les sirva :) Span Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Span Grid</title>
  <style>
    body {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      height: 90vh;
    }

    body div {
      text-align: center;
      color: white;
      font-size: 2rem;
    }

    body .span-12 {
      grid-column: 1 / 13;
      background-color: green;
    }

    body .span-6 {
      grid-column: 1 / 7;
      background-color: red;
    }

    body .span-4 {
      grid-column: 1 / 5;
      background-color: blue;
    }

    body .span-2 {
      grid-column: 1 / 3;
      background-color: yellow;
      color: black;
    }
  </style>
</head>
<body>
  <div class="span-12">span-12</div>
  <div class="span-6">span-6</div>
  <div class="span-4">span-4</div>
  <div class="span-2">span-2</div>
</body>
</html>

RAM:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RAM (Not the memory)</title>
  <style>
    body {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    body div {
      height: 100px;
      text-align: center;
      color: white;
      font-size: 2rem;
    }

    body .one {
      background-color: cadetblue;
    }

    body .two {
      background-color: blueviolet;
    }

    body .three {
      background-color: forestgreen;
    }

    body .four {
      background-color: deeppink;
    }
  </style>
</head>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</body>
</html>

Line Up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Up</title>
  <style>
    body {
      height: auto;
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
    }

    body .section {
      background-color: coral;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    body .section div {
      height: 100px;
      width: 120px;
      margin-block-end: 20px;
    }

    body .section p {
      padding-inline: 5%;
    }

    body .section .color-1 {
      background-color: violet;
    }

    body .section .color-2 {
      background-color: dodgerblue;
    }

    body .section .color-3 {
      background-color: chartreuse;
    }
  </style>
</head>
<body>
  <section class="section">
    <h2 class="title">Title - Card 1</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-1"></div>
  </section>
  <section class="section">
    <h2 class="title">Title - Card 2</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-2"></div>
  </section>
  <section class="section">
    <h2 class="title">Title - Card 3</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-3"></div>
  </section>
</body>
</html>

Clamp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clamping my style</title>
  <style>
    body {
      display: grid;
      place-items: center;
    }

    body .card {
      width: clamp(23ch, 50%, 46ch);
      display: flex;
      flex-direction: column;
      padding: 1rem;
      background-color: cadetblue;
      color: white;
    }

    body .card .color {
      width: 80%;
      height: 100px;
      background-color: antiquewhite;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <section class="card">
    <h2 class="h2">Title Here</h3>
    <div class="color"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ut esse sed sapiente facilis hic, sunt delectus error quam doloribus cupiditate odit quo accusamus molestiae quaerat recusandae tempora! Possimus, dolor.</p>
  </section>
</body>
</html>

Respect for Aspect:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Respect for Aspect</title>
  <style>
    body {
      display: grid;
      place-items: center;
    }

    body .section {
      width: 50%;
      display: flex;
      flex-direction: column;
      background-color: aquamarine;
      aspect-ratio: 16 / 9; /*1 /1 es un cuadrado*/
    }

    body .section .color {
      width: 80%;
      height: 200px;
      background-color: darkkhaki;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <section class="section">
    <h2 class="h2">Video Title</h3>
    <div class="color"></div>
    <p>Hola gente de Platzi</p>
  </section>
</body>
</html>

Gerson Marín Escobedo Pérez

student•

Gracias bro, me sirvió mucho

Oriol Fernando Palacios Durand

student•

Si no captan lo de grow/shrink/basis enontré este video espero que les ayude como a mi

José Luis Díaz Santos

student•

Muchísimas gracias!

Eddie Mora

student•

No está disponible

Brad Neydan Velarde Fabian

student•

me estan cobrando por un video de youtube, wow

Oriol Fernando Palacios Durand

student•

¿Cómo funciona la función clamp()?

Omar Daniel Centeno

student•

¡Hola!

La función clamp()permite seleccionar un valor medio dentro de un rango de valores entre un mínimo y un máximo definidos. Toma tres parámetros: un valor mínimo, un valor preferido y un valor máximo permitido. por ejemplo:

font-size: clamp(1rem, 2.5vw, 2rem);

Puedes revisar la documentación de MDN Web Docs que contiene muchos ejemplos interactivos.

¡Saludos!

Ibañez Laura

student•

Un jueguito para poner en práctica la clase: https://cssgridgarden.com/#es

Edgar Josué Torres Urquilla

student•

mucho mas util el jueguito que esta clase, diosss....

Benjamin Allen Ramirez Horna

student•

Hay dos tipos de personas en estos cursos. Las que no se dejan influenciar y se dan cuenta de lo nada practico que es este curso y que no les servirá nada para ser desarrolladores web. Y los ignorantes que dicen que les va bien y no se preocupan, pero que ya veran cuando estén frente al código.

Platzi Team

student•

Esto no es la cloaca de twitter compañero, esa clase de comentarios de segmentar las audiencias cuando la experiencia de aprendizaje es una experiencia personal, como relfejas que no tienes experiencia ni trabajando ni despempeñandote en equipos de trabajo, y si es lo contrario, muy mal por la empresa que te contrate

Benjamin Allen Ramirez Horna

student•

Lee tu comentario compañero se ve que vas por un camino toxico y super solitario ni aunque trabaje para una empresa que pague bien desearia tener tu vida de persona fracasada que busca llenar su vacio. Y por cierto no uso twitter.

Erika Nathaly Bernal Morales

student•

Con todo respeto, pero siento que se habla mucho y poco se construye. Esperaba más del curso y NO solo teoría. Toda esta información claramente YA APARECE en internet y GRATIS. Como quien dice: "A practicar afuera porque acá cero"

Luis Antonio yepes berbesi

student•

fueran puesto primero este curso y después el de css grid layau

Camilo Torres camayo

student•

Estas CARDS las hice teniendo en cuenta estas dos opciones 07. RAM (Repeat, Auto, Minmax) 09. Clamping My Style

HTML

<div class="container">
  <div class="card">
  <h2>MAMERTOLANDIA</h2>
  <div class="visual"></div>
  <p>El despertar de Colombia</p>
  <br/>
  <p>Somos la resistencia inteligente.</p>
</div>
<div class="card">
  <h2>MAMERTOLANDIA</h2>
  <div class="visual"></div>
  <p>El despertar de Colombia</p>
  <br/>
  <p>¿Renuncia Duque o golpe de estado?</p>
</div>  
</div>

CSS

body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.container {
  display: grid;
  place-items: center;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  width: 100vw;
  
}

.visual {
  background-image: url(https://i.ytimg.com/vi/Bx6BTVQu9xA/maxresdefault.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
  border-radius: 20px;
  height: 90px;
  width: 100%;
  background-size: cover;
  margin: 0.5rem 0;
}

.card {
  width: clamp(30ch, 43%, 55ch);
  display: flex;
  flex-direction: column;
  background: #dda15e;
  padding: 1rem;
  height:90%;
  border-radius: 10px;
  -webkit-box-shadow: 5px 4px 15px 1px rgba(0,0,0,0.58); 
box-shadow: 5px 4px 15px 1px rgba(0,0,0,0.58);
}

body {
  font-family: system-ui, sans-serif;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-align: center;
  letter-spacing: 3px;
}
p {
  color: white;
  text-align: center;
}

Dairo Ariza

student•

¿Quien conoce otro curso de grid & flexbox?, este curso es un refrito de todo el contenido gratuito por internet. Hasta aquí lo dejo

Layouts CSS con Pocas Líneas de Código

Descubre qué ha cambiado en nuestro medio

Diseño Web Avanzado con CSS Grid y Flexbox

Conceptos que forman parte del diseño en CSS

Conceptos Fundamentales de Diseño CSS: Display y Posicionamiento

Fundamentos de Display en CSS: Bloque, Inline y Flujo Normal

Formato de Contexto de Blog en CSS: Creación y Uso de BFCs

Posicionamiento y contexto de apilamiento en CSS

¿Flexbox o CSS Grid?

Diferencias entre CSS Grid y Flexbox

Similitudes entre Flexbox y CSS Grid en Alineación y Jerarquía

Uso combinado de Flexbox y CSS Grid en diseño web

Uso de Flexbox y CSS Grid en Componentes Web

Flexbox vs CSS Grid: Cuándo y Cómo Usarlos

Cuándo usar Flexbox y CSS Grid en diseño web

Modern Layouts con CSS Grid

Diseño Moderno de Layouts con CSS Grid y Flexbox

Patrones de Diseño con CSS Grid

Diseños Modernos en CSS: Cinco Técnicas Sencillas