Layout patterns

Resumen Principal

El recurso titulado "Layout patterns" presenta una recopilación especializada de patrones de diseño construidos con APIs modernas de CSS, orientados a facilitar la creación de interfaces web comunes y altamente funcionales. Este enfoque práctico permite a los desarrolladores implementar estructuras visuales como tarjetas (cards), áreas de cuadrícula dinámicas y diseños de página completa con mayor eficiencia y alineación a las mejores prácticas actuales. Al aprovechar las capacidades avanzadas de CSS, como Grid Layout y Flexbox, estos patrones ofrecen soluciones reutilizables que no solo optimizan el flujo de trabajo, sino que también garantizan una presentación coherente y adaptable en distintos dispositivos. La propuesta resalta por su enfoque en la modularidad y la escalabilidad, lo que la convierte en una herramienta valiosa para diseñadores y desarrolladores que buscan mantener estándares de calidad mientras reducen tiempos de implementación. Además, al centrarse en componentes de interfaz ampliamente utilizados, el contenido se posiciona como un recurso esencial para proyectos web contemporáneos que requieren tanto eficiencia técnica como estética visual.

Elementos Clave

Patrones de diseño basados en CSS moderno: Los patrones están construidos utilizando las últimas APIs de CSS, lo que asegura compatibilidad con estándares actuales y aprovechamiento de funcionalidades avanzadas como Grid y Flexbox.
Componentes de interfaz comunes: Incluye estructuras como cards, áreas de cuadrícula dinámica y layouts de página completa, elementos fundamentales en el diseño web actual debido a su versatilidad y usabilidad.
Enfoque en reutilización y eficiencia: Cada patrón está diseñado para ser reutilizable, lo que permite a los equipos de desarrollo acelerar la construcción de interfaces sin sacrificar la calidad o la consistencia visual.
Adaptabilidad multi-dispositivo: Los patrones están pensados para funcionar eficazmente en diferentes tamaños de pantalla y contextos, facilitando la creación de experiencias web responsivas y accesibles.

Análisis e Implicaciones

La adopción de estos patrones de diseño puede mejorar significativamente la productividad en el desarrollo frontend al estandarizar soluciones para problemas comunes de maquetación. Además, al basarse en tecnologías modernas de CSS, estos recursos impulsan la adopción de buenas prácticas en el diseño web, promoviendo interfaces más limpias, mantenibles y escalables. Esto también puede tener un impacto positivo en el rendimiento del sitio y en la experiencia del usuario, gracias a estructuras más optimizadas y coherentes.

Contexto Adicional

Este tipo de colecciones de patrones es especialmente relevante en un entorno donde la velocidad de desarrollo y la calidad del diseño deben equilibrarse constantemente. La evolución de CSS hacia un lenguaje más potente y expresivo permite a los desarrolladores abstraer complejidades visuales en componentes reutilizables, lo que convierte a recursos como este en herramientas fundamentales dentro del flujo de trabajo moderno.

Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS grid and flexbox to help you achieve common UI patterns such as cards, dynamic grid areas, and full-page layouts, and are supported on all modern browsers.

Caution: This collection also includes some experimental patterns that use container queries. These patterns are denoted by a yellow warning icon (⚠️), and are not currently supported in stable browsers.

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

.parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

Maintains the aspect ratio of an image in a card, while letting you resize the card.

Learn more

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

.parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }

Sets an absolute min and max size, and an actual size for the card.

Learn more

<div class="container">
  <div class="card">
    <div class="visual"></div>
    <div>
      <div class="meta">
        <h1>Card Title Here</h1>
        <h2 class="time">Subtitle</h2>
      </div>
        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
      <button>I'm a button</button>
    </div>
  </div>
</div>

/* Set containment on parent */
.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* Base Styles */
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

/* Responsive styles */

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

Card that owns its independent style logic and is styled based on its parent's inline width.

Learn more

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}

Create a layout that stretches to fit the space, and snaps to the next line at a minimum size.

Learn more

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}

Classic layout with a header, footer, and two sidebars flanking a main content area.

Learn more

<div class="container">
  <div class="card">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual"></div>
  </div>
</div>

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.visual {
  height: 100px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

h3 {
  margin: 0
}

A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.

Learn more

<div class="parent">
  <header class="section yellow">Header</header>
  <main class="section blue">Main</main>
  <footer class="section green">Footer Content</footer>
</div>

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* Just for parent demo size */
  height: 100vh;
}

Commonly referred to as a sticky footer, this layout is often used for both websites and apps.

Learn more

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>

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

A responsive layout with automatically-placed and flexible children.

Learn more

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 100px / Max: 25%
    </div>
    <div class="section blue" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.

Learn more

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>

.parent {
  display: grid;
  place-items: center;

  /* Just for parent demo size */
  height: 100vh;
}

Centering a child div in one line of code

Learn more

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

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

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}

A grid broken up into 12 segments where you can place areas onto the tracks evenly.

Learn more

Absortio

Extracto

Resumen

Resumen Principal

Elementos Clave

Análisis e Implicaciones

Contexto Adicional

Contenido