{"id":31594,"date":"2025-01-22T11:07:45","date_gmt":"2025-01-22T10:07:45","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=31594"},"modified":"2025-01-28T09:26:56","modified_gmt":"2025-01-28T08:26:56","slug":"creamos-un-diseno-de-caja-bento-usando-css-moderno","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-un-diseno-de-caja-bento-usando-css-moderno\/","title":{"rendered":"Creamos un dise\u00f1o de caja bento usando CSS moderno"},"content":{"rendered":"\n

Una caja bento (\ud83c\udf71) es el famoso recipiente japon\u00e9s para almuerzos que mantiene separadas de manera ordenada las diferentes comidas preparadas. Llevar a la escuela un bento listo es un gesto de afecto hacia quien lo recibe, y la atenci\u00f3n con la que se organizan y presentan los distintos platos, adem\u00e1s de la calidad de la comida, representa cu\u00e1nto te importa esa persona.<\/p>\n\n\n\n

De esta costumbre y del dise\u00f1o minimalista, equilibrado y funcional de este peculiar objeto, ha surgido una tendencia en UX\/UI llamada Bento Layout (o Bento Box Layout), que ser\u00e1 el tema de este tutorial: no utilizaremos arroz, zanahorias o salchichas con forma de pulpo, sino HTML y CSS modernos como nuestros ingredientes, \u00a1pero la dedicaci\u00f3n y el cari\u00f1o con los que se combinan son los mismos!<\/p>\n\n\n\n

\n
<\/div>\n<\/div>\n\n\n\n

La base
<\/h2>\n\n\n\n

Para nuestro experimento, queremos partir de una base bastante sencilla pero extremadamente com\u00fan: tenemos un elemento <main><\/code> que contiene varios elementos <section><\/code>, cada uno con su propio <article><\/code>, que a su vez incluye un <header><\/code> y una imagen dentro de un elemento sem\u00e1ntico <figure><\/code>.<\/p>\n\n\n\n

<!DOCTYPE html>
<html lang=\"es\">
  <head>
    <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">
    <meta charset=\"utf-8\" \/>
    <title>\ud83c\udf71 Dise\u00f1o de Caja Bento con CSS Moderno<\/title>
  <\/head>
  <body>
    <main>
      <section class=\"bento\">
        <article>
          <header>
            <h2>Caja 1<\/h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>
          <\/header>
          <figure>
            <img src=\".\/images\/0.png\" alt=\"imagen generada por IA de anime\">
          <\/figure>
        <\/article>
        <!-- 7 art\u00edculos m\u00e1s aqu\u00ed -->
      <\/section>
    <\/main>
  <\/body>
<\/html>
<\/code><\/pre>\n\n\n\n
Utilizaremos CSS moderno (Baseline) para hacer que nuestra base sea responsive, adoptando un enfoque mobile-first:<\/p>\n\n\n\n
root {
  font-family: system-ui, sans-serif;
  font-size: clamp(14px, 5vw, 20px);
  --dark-color: #5c6378ff;
  --light-color: #edf2f4ff;
  --background-color: #2b2d42ff;
  --secondary-color: #757e93ff;
  --antiflash-white: #edf2f4ff;
  --important-color: #ef233cff;
  --fire-engine-red: #d90429ff;
}

body {
  background-color: var(--background-color);
  color: var(--light-color);
  margin: 0;
}

article {
  background-color: var(--light-color);
  color: var(--dark-color);
  padding: 1rem;
  margin-bottom: 1rem;
}

article figure {
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

main {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
  padding-block-start: 2rem;
}
<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Para experimentar con un dise\u00f1o bento, a\u00f1adimos algunos art\u00edculos y observamos que, por defecto, si nos limitamos a pocos cambios en la hoja de estilo, nuestros elementos HTML aparecer\u00e1n accesibles y perfectamente utilizables: menos es m\u00e1s en CSS.<\/p>\n\n\n\n
Bento con dise\u00f1o de cuadr\u00edcula<\/strong><\/h2>\n\n\n\n
La t\u00e9cnica ideal para un dise\u00f1o modular compuesto por contenedores es establecer la propiedad CSS display<\/code> de nuestras secciones a grid<\/code>. Sin embargo, para poder jugar con la posici\u00f3n y la forma de los art\u00edculos, necesitaremos algunos ajustes adicionales que nos ser\u00e1n \u00fatiles m\u00e1s adelante.<\/p>\n\n\n\n
.bento {
    --bento-cols<\/strong>: 5;
    --bento-rows<\/strong>: 3;
    --bento-border-radius<\/strong>: 1rem;
    --bento-gap<\/strong>: 1rem;
    display<\/strong>: grid;
    grid-template-columns<\/strong>: repeat(var(--bento-cols), 1fr);
    grid-template-rows<\/strong>: repeat(var(--bento-rows), 1fr);
    width<\/strong>: 100%;
    aspect-ratio<\/strong>: var(--bento-cols) \/ var(--bento-rows);
}

.bento>* {
    overflow<\/strong>: hidden;
    position<\/strong>: relative;
    margin<\/strong>: calc(var(--bento-gap) \/ 2);
    border-radius<\/strong>: var(--bento-border-radius);
}

@media<\/strong> screen and<\/strong> (aspect-ratio < 1) {

    .bento {
        --bento-cols<\/strong>: 3;
        --bento-rows<\/strong>: 5;
    }
}<\/code><\/pre>\n\n\n\n
Hemos introducido algunas variables para controlar el n\u00famero de columnas y filas. Utilizaremos estos dos valores para determinar en cu\u00e1ntas fracciones dividir nuestra “cuadr\u00edcula bento” y calcular la propiedad aspect-ratio<\/code>, es decir, la proporci\u00f3n entre el ancho y la altura. Este peque\u00f1o truco nos permite tener celdas exactamente cuadradas, y ser\u00e1 la clave de nuestra estrategia.<\/p>\n\n\n
\n
\"Una<\/figure><\/div>\n\n\n
Para asegurarnos de que los elementos <article><\/code> est\u00e9n contenidos dentro de las celdas, hemos a\u00f1adido la regla overflow: hidden<\/code>.<\/p>\n\n\n\n
Para mantener la flexibilidad de nuestro dise\u00f1o, es importante no usar la propiedad gap<\/code> de la cuadr\u00edcula, ya que esto rompe la proporci\u00f3n entre el ancho y la altura totales, y los m\u00f3dulos (los elementos en nuestro bento dejan de ser exactamente cuadrados). Utilizaremos el margen de los contenidos para espaciar los “alimentos” o elementos de nuestro bento.<\/p>\n\n\n\n
Personaliza tu dise\u00f1o bento<\/strong><\/h2>\n\n\n\n
\u00a1Finalmente llega la parte m\u00e1s divertida y espec\u00edfica de este tutorial! Personalicemos nuestra caja bento decidiendo cu\u00e1ntas celdas ocupar\u00e1 cada elemento: usando el valor span 2<\/code> en las propiedades grid-column<\/code> o grid-row<\/code>, podemos obtener m\u00f3dulos horizontales (2\u00d71 celdas) y verticales (1\u00d72 celdas). Combin\u00e1ndolos, conseguimos una celda grande cuadrada (2\u00d72 celdas).<\/p>\n\n\n\n
Estamos listos para especificar as\u00ed la forma (e importancia) que tendr\u00e1n nuestros <article><\/code> seg\u00fan el orden en el que est\u00e9n en la <section><\/code>. Agregamos una clase layout-1<\/code>, que ser\u00e1 nuestra plantilla reutilizable, \u00a1y listo!<\/p>\n\n\n\n
.bento.layout-1> :nth-child(1) {
    grid-column<\/strong>: span 2;
    grid-row<\/strong>: span 2;
  background-color<\/strong>: var(--important-color);
  color<\/strong>: var(--light-color);
}

.bento.layout-1> :nth-child(2) {
    grid-row<\/strong>: span 2;
  background-color<\/strong>: var(--secondary-color);
  color<\/strong>: var(--light-color);
}

.bento.layout-1> :nth-child(3),
.bento.layout-1> :nth-child(4),
.bento.layout-1> :nth-child(8) {
    grid-column<\/strong>: span 2;
  background-color<\/strong>: var(--dark-color);
  color<\/strong>: var(--light-color);
}

.bento.layout-1> :nth-child(n + 9) {
    display<\/strong>: none;
}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Bento Layout verticale<\/h2>\n\n\n\n
Para pantallas verticales, es posible que debamos reorganizar nuestro dise\u00f1o bento. Aprovechemos esta oportunidad para crear un dise\u00f1o espec\u00edfico invirtiendo el n\u00famero de columnas y filas, y reajustando nuestros m\u00f3dulos para que mantengan un equilibrio en pantallas verticales.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

@media<\/strong> screen and<\/strong> (aspect-ratio < 1) {

  .bento.layout-1 {
      --bento-cols<\/strong>: 3;
      --bento-rows<\/strong>: 5;
  }

  .bento.layout-1> :nth-child(n) {
      \/* Reset spans *\/
      grid-column<\/strong>: auto;
      grid-row<\/strong>: auto;
  }

  .bento.layout-1> :nth-child(1),
  .bento.layout-1> :nth-child(8) {
      grid-column<\/strong>: span 2;
      grid-row<\/strong>: span 2;
  }

  .bento.layout-1> :nth-child(5) {
      grid-column<\/strong>: span 2;
  }

  .bento.layout-1> :nth-child(7) {
      grid-column<\/strong>: 1;
      grid-row<\/strong>: 5;
  }
  
}<\/code><\/pre>\n\n\n\n
Dise\u00f1o de caja bento y consultas de contenedor<\/strong><\/h2>\n\n\n\n
Y ahora, el plato fuerte de nuestro dise\u00f1o bento: \u00a1utilicemos las container queries<\/em> para dar un dise\u00f1o espec\u00edfico a cada <article><\/code>!<\/p>\n\n\n\n
Antes de personalizar los formatos individuales de nuestros elementos, preparemos una base com\u00fan que facilite nuestro trabajo:<\/p>\n\n\n\n
.bento>* {
  display<\/strong>: flex;
  flex-direction<\/strong>: column-reverse;
}

.bento.layout-1 h1<\/strong>, .bento.layout-1 h2<\/strong>, .bento.layout-1 h3<\/strong>, .bento.layout-1 p<\/strong> {
  margin<\/strong>: 0;
}

.bento.layout-1>* figure<\/strong> {
  position<\/strong>: absolute;
  inset<\/strong>: 0;
}
.bento.layout-1>* header<\/strong> {
  position<\/strong>: relative;
  z-index<\/strong>: 1;
  background-color<\/strong>: inherit;
}

.bento.layout-1>* figure<\/strong> img<\/strong> {
    object-fit<\/strong>: cover;
    height<\/strong>: 100%;
}

.bento.layout-1>* header<\/strong> {
    position<\/strong>: absolute;
    bottom<\/strong>: 0;
    inset-inline<\/strong>: 0;
    border-radius<\/strong>: 0;
    font-size<\/strong>: 70%;
    padding<\/strong>: 0.5rem;
}<\/code><\/pre>\n\n\n\n
\u00a1Por fin a\u00f1adimos las propiedades CSS container-type<\/code> y container-name<\/code> para darle a los contenidos de nuestros bento layouts<\/em> el superpoder de hacer consultas sobre propiedades como width<\/code>, height<\/code> y, s\u00faper importante, aspect-ratio<\/code>! \ud83d\ude80<\/p>\n\n\n\n
.bento > * {
  container-type<\/strong>: size;
  container-name<\/strong>: bento-item;
}<\/code><\/pre>\n\n\n\n
Completemos nuestro dise\u00f1o bento definiendo los diferentes formatos en los que debe aparecer cada art\u00edculo. Para ello, podemos evaluar tanto las dimensiones (y, por lo tanto, ocultar algunos elementos) como las proporciones: \u00bfser\u00e1 nuestro contenedor cuadrado, vertical u horizontal? \u00bfTendr\u00e1 suficiente espacio para todo?<\/p>\n\n\n\n
Descubramos c\u00f3mo lograrlo utilizando las container queries (consultas de contenedor):<\/p>\n\n\n\n

@container<\/strong> bento-item (width < 200px) and<\/strong> (height < 200px) {
  .bento.layout-1>* header<\/strong> {
    font-size<\/strong>: 0.7rem;
  }
  
  .bento.layout-1>* header<\/strong> p<\/strong> {
        display<\/strong>: none;
    }
}

@container<\/strong> bento-item (aspect-ratio > 1) {
  .bento.layout-1>* header<\/strong> {
   top<\/strong>: 0;
    right<\/strong>: 60%;
  }
  
  .bento.layout-1> * figure<\/strong> {
    inset<\/strong>: 0 0 0 40%;
  }
}


@container<\/strong> bento-item (aspect-ratio = 1) and<\/strong> (width > 200px) {
  .bento.layout-1>* header<\/strong> {
    font-size<\/strong>: 120%;
    background-color<\/strong>: #0006;
    color<\/strong>: var(--light-color);
    backdrop-filter<\/strong>: blur(4px);
  }
}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Microanimaciones<\/h2>\n\n\n\n
Para dar vida a nuestro dise\u00f1o bento, a\u00f1adamos microanimaciones sutiles pero efectivas. Las animaciones hacen que la interfaz sea m\u00e1s din\u00e1mica y agradable, manteniendo siempre un enfoque minimalista que refleja la filosof\u00eda del dise\u00f1o bento.<\/p>\n\n\n\n
Primero, a\u00f1adamos una transici\u00f3n fluida a todos los elementos del bento:<\/p>\n\n\n\n
.bento > * {
    transition<\/strong>: transform 0.3s ease-out, filter 0.3s ease-out;
}<\/code><\/pre>\n\n\n\n
Creamos un efecto de hover que eleva ligeramente el elemento y a\u00f1ade una sutil sombra.<\/p>\n\n\n\n
.bento > *:hover {
    transform<\/strong>: translateY(-0.5rem);
    filter<\/strong>: drop-shadow(0 0.5rem 0.1rem #0009);
}<\/code><\/pre>\n\n\n\n
Para las im\u00e1genes, podemos a\u00f1adir un ligero efecto de zoom combinado con un movimiento hacia abajo, logrando una especie de movimiento de c\u00e1mara similar a un “dolly”.<\/p>\n\n\n\n
.bento.layout-1 > * figure<\/strong> img<\/strong> {
    transition<\/strong>: transform 1s;
}

.bento.layout-1 > *:hover figure<\/strong> img<\/strong> {
    transform<\/strong>: scale(1.50) translateY(15%);
}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Recordemos respetar las preferencias de accesibilidad del usuario desactivando las animaciones si prefers-reduced-motion<\/code> est\u00e1 activado en el navegador:<\/p>\n\n\n\n
@media<\/strong> (prefers-reduced-motion:<\/strong> reduce) {
    .bento > *,
    .bento.layout-1 > * header<\/strong>,
    .bento.layout-1 > * figure<\/strong> img<\/strong> {
        transition<\/strong>: none;
    }
    
    .bento > *:hover {
        transform<\/strong>: none;
    }
    
    .bento.layout-1 > *:hover figure<\/strong> img<\/strong> {
        transform<\/strong>: none;
    }
}<\/code><\/pre>\n\n\n\n
Conclusiones<\/strong><\/h2>\n\n\n\n
En este tutorial, hemos explorado c\u00f3mo crear un dise\u00f1o de caja bento moderno utilizando CSS contempor\u00e1neo. Inspir\u00e1ndonos en la filosof\u00eda del bento japon\u00e9s, hemos construido una interfaz modular empleando:<\/p>\n\n\n\n