Meta tags:
description=Aprende a usar CSS grid-template-areas para nombrar regiones de cuadrícula, crear layouts visualmente y reorganizarlos con media queries.;

Headings (most frequently used words):

de, las, propiedad, grid, template, la, con, deben, área, css, areas, referencia, sintaxis, cómo, interpretar, cadenas, valores, ejemplo, básico, layout, celdas, vacías, puntos, layouts, responsivos, media, queries, errores, comunes, abreviatura, práctica, resultado, áreas, ser, rectangulares, todas, filas, tener, el, mismo, número, columnas, nombrar, un, no, dimensiona, sus, pistas, los, elementos, sin, coincidente, se, colocan, automáticamente,

Text of the page (most frequently used words):
grid (89), #template (47), border (34), css (29), div (28), header (26), areas (24), color (23), text (23), con (22), las (22), una (22), font (22), footer (20), nombre (19), style (18), right (16), background (16), para (15), aprender (15), width (15), column (15), content (14), html (13), cuadrícula (13), que (12), area (12), cada (12), los (11), columns (11), propiedad (10), por (10), left (10), padding (10), break (10), celdas (9), layout (9), cadena (9), copiar (9), container (9), área (9), main (9), class (9), top (9), bottom (9), image (9), animation (9), page (8), áreas (8), display (8), rows (8), auto (8), row (8), mismo (8), menu (8), align (8), position (8), stroke (8), cadenas (7), usa (7), fila (7), celda (7), overflow (7), decoration (7), offset (7), flex (7), media (6), tokens (6), número (6), más (6), columnas (6), size (6), gap (6), title (6), margin (6), type (6), variant (6), w3docs (5), página (5), elemento (5), qué (5), tres (5), body (5), entre (5), comillas (5), forma (5), como (5), none (5), box (5), string (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), práctica (4), layouts (4), queries (4), ejemplo (4), sintaxis (4), referencia (4), plantilla (4), navegador (4), coloca (4), sin (4), sidebar (4), invalid (4), only (4), debe (4), rectangular (4), head (4), item1 (4), valor (4), nombres (4), start (4), mode (4), transform (4), fill (4), height (4), list (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), web (3), abreviatura (3), responsivos (3), vacías (3), puntos (3), del (3), elementos (3), línea (3), nav (3), combina (3), declaración (3), ningún (3), flow (3), nombrar (3), sus (3), valid (3), filas (3), punto (3), inválida (3), min (3), dentro (3), property (3), token (3), vacía (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), direction (3), clip (3), ver (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), desde (2), errores (2), comunes (2), básico (2), valores (2), cómo (2), interpretar (2), this (2), texto (2), patrón (2), hace (2), crear (2), tamaño (2), columna (2), van (2), resultado (2), escribir (2), propiedades (2), separado (2), 180 (2), sola (2), automáticamente (2), lugar (2), colocan (2), dimensiona (2), pistas (2), good (2), bad (2), has (2), tener (2), espacios (2), blanco (2), deben (2), shape (2), trata (2), toda (2), rectángulo (2), ser (2), rectangulares (2), colocación (2), pruébalo (2), example (2), center (2), eee (2), ccc (2), the (2), document (2), doctype (2), esa (2), abarca (2), dos (2), box5 (2), box4 (2), box3 (2), box2 (2), box1 (2), representa (2), números (2), span (2), uno (2), vertical (2), contrario (2), unas (2), aplica (2), visualmente (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), end (2), feature (2), empty (2), counter (2), count (2), repeat (2), read (2), guía (2), hash (2), 2026, todos, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, ejemplos, gratuitos, 2014, next, previous, yes, was, helpful, comprobar, cambiar, definir, imagen, fondo, especificar, sigue, misma, tamaños, después, final, idéntico, hijo, coincide, usando, algoritmo, cae, siguiente, implícita, disponible, desaparecer, coincidente, heights, fixed, fluid, indican, siempre, tienen, esas, juntas, three, every, separados, rellena, cortas, alineen, todas, now, shaped, forms, aparece, diagonal, cualquier, largo, recurre, formar, continuo, conserva, solo, cambia, esta, razón, principal, prefieren, frente, diseños, 200, 700, desktop, mobile, single, stack, natural, simplemente, reescribe, bloque, breakpoint, redibuja, cambios, marcado, necesidad, renumerar, líneas, dejando, desocupada, continuación, primeras, cinco, restantes, están, clásico, encabezado, barra, lateral, contenido, pie, demostración, sencilla, existen, dibujan, repetidos, forman, definen, otros, medios, automática, descripción, aquí, abarcan, mientras, sitúan, junto, otro, central, controlar, dimensiones, pertenece, varios, consecutivos, cuentan, son, convención, habitual, mejorar, legibilidad, marca, adyacentes, horizontal, fusiona, repetido, varias, ignora, contener, crean, determina, pocas, reglas, aclaran, predeterminado, indica, han, definido, module, level, versión, animable, heredable, contenedores, inicial, entonces, haciendo, esos, ese, donde, hayas, escrito, alinean, bajo, otras, dibujo, ascii, código, fuente, termina, pareciéndose, produce, complejos, sean, mucho, fáciles, leer, reorganizar, establecer, variantes, abreviadas, manual, permite, diseñar, dibujando, contenedor, pasa, escribe, comparten, combinan, única, aprende, usar, regiones, reorganizarlos, zoom, index, writing, will, change, widows, white, space, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectores, selectors, css3, flexbox, guides, gradientes, colores, tablas, links, uso, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
propiedad css grid template areas guía de grid layout w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad css grid template areas aprende a usar css grid template areas para nombrar regiones de cuadrícula crear layouts visualmente y reorganizarlos con media queries la propiedad grid template areas te permite diseñar visualmente una cuadrícula css dibujando el layout con nombres en lugar de números se aplica a un contenedor de cuadrícula y se le pasa una cadena entre comillas por cada fila de la cuadrícula dentro de cada cadena se escribe un nombre para cada celda de columna y las celdas que comparten el mismo nombre se combinan en una única área con nombre rectangular cada elemento de la cuadrícula se coloca entonces haciendo referencia a uno de esos nombres con la propiedad grid area por ejemplo grid area header coloca ese elemento donde hayas escrito header en la plantilla como las cadenas se alinean unas bajo otras como un dibujo ascii el código fuente termina pareciéndose a la página que produce lo que hace que los layouts complejos sean mucho más fáciles de leer y reorganizar que establecer grid row start grid column start y sus variantes abreviadas de forma manual referencia de la propiedad valor inicial none se aplica a contenedores de cuadrícula heredable no animable no versión css grid layout module level 1 sintaxis grid template areas none string copiar none es el valor predeterminado e indica que no se han definido áreas con nombre de lo contrario el valor es una o más cadenas entre comillas una por fila cómo interpretar las cadenas unas pocas reglas aclaran la sintaxis una cadena una fila tres cadenas entre comillas crean tres filas el número de nombres en cada cadena determina el número de columnas cada cadena debe contener el mismo número de tokens de lo contrario el navegador trata toda la declaración como inválida y la ignora un nombre repetido abarca varias celdas escribir el mismo nombre en dos o más celdas adyacentes horizontal vertical o en un rectángulo las fusiona en un área la forma debe ser rectangular una forma en l es inválida un punto marca una celda vacía que no pertenece a ningún área con nombre varios puntos consecutivos p ej cuentan como una sola celda vacía y son una convención habitual para mejorar la legibilidad nombrar un área no dimensiona sus pistas usa grid template columns y grid template rows o la abreviatura grid template para controlar las dimensiones container display grid grid template columns 1 fr 3 fr 1 fr grid template rows auto 1 fr auto grid template areas header header header menu main right footer footer footer copiar aquí header y footer abarcan las tres columnas mientras que menu main y right se sitúan uno junto al otro en la fila central valores valor descripción none no se definen áreas de cuadrícula con nombre los elementos se colocan por otros medios números de línea span o colocación automática string una o más cadenas entre comillas que dibujan la plantilla cada cadena representa una fila cada token separado por espacios en blanco dentro de una cadena representa una celda los tokens repetidos forman áreas con nombre rectangulares un token es una celda sin nombre vacía ejemplo básico de layout el layout clásico de página encabezado barra lateral contenido y pie de página es la demostración más sencilla de por qué existen las áreas con nombre doctype html html head title title of the document title style box1 grid area header box2 grid area menu box3 grid area main box4 grid area right box5 grid area footer grid container display grid grid template areas header header header header header header menu main main main right right menu footer footer footer footer footer gap 10 px background color ccc padding 10 px grid container div background color eee text align center padding 20 px 0 font size 30 px style head body h2 grid template areas property example h2 div class grid container div class box1 header div div class box2 menu div div class box3 main div div class box4 right div div class box5 footer div div body html copiar pruébalo tú mismo resultado celdas vacías con puntos un token de punto coloca un elemento en ningún área con nombre dejando esa celda desocupada en el ejemplo a continuación item1 abarca las dos primeras columnas de una cuadrícula de cinco columnas las tres celdas restantes de esa fila están vacías doctype html html head title title of the document title style box grid area item1 grid container display grid grid template areas item1 item1 gap 10 px background color ccc padding 10 px grid container div background color eee text align center padding 30 px 0 font size 20 px style head body h2 grid template areas property example h2 div class grid container div class box 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div body html copiar pruébalo tú mismo layouts responsivos con media queries grid template areas se combina de forma natural con las media queries simplemente reescribe las cadenas dentro del bloque del breakpoint y el layout se redibuja sin cambios en el marcado y sin necesidad de renumerar las líneas de la cuadrícula mobile single column stack page display grid grid template columns 1 fr grid template areas header menu main footer desktop sidebar left content right media min width 700 px page grid template columns 200 px 1 fr grid template rows auto 1 fr auto grid template areas header header menu main footer footer copiar cada elemento de la cuadrícula conserva su nombre en grid area solo cambia la plantilla esta es la razón principal por la que las áreas con nombre se prefieren frente a la colocación por número de línea en los diseños responsivos errores comunes las áreas deben ser rectangulares si el mismo nombre aparece en forma de l en diagonal o en cualquier patrón no rectangular a lo largo de las celdas el navegador trata toda la declaración grid template areas como inválida y recurre a none cada área con nombre debe formar un rectángulo continuo invalid content forms an l shape bad grid template areas header header content sidebar content content content is now l shaped invalid valid content is rectangular good grid template areas header header content sidebar footer footer copiar todas las filas deben tener el mismo número de columnas cada cadena entre comillas debe tener el mismo número de tokens separados por espacios en blanco rellena las filas más cortas con tokens de punto para que las columnas se alineen invalid row 2 has only 2 tokens row 1 has 3 bad grid template areas a a b c c valid three tokens in every row good grid template areas a a b c c copiar nombrar un área no dimensiona sus pistas las áreas con nombre le indican al navegador qué celdas van juntas no qué tamaño tienen esas celdas combina siempre grid template areas con grid template columns y grid template rows container display grid grid template columns 180 px 1 fr sidebar fixed content fluid grid template rows 60 px 1 fr 40 px header body footer heights grid template areas header header nav content nav footer copiar los elementos sin área coincidente se colocan automáticamente si el nombre de grid area de un hijo no coincide con ningún área de la plantilla el navegador lo coloca automáticamente usando el algoritmo grid auto flow cae en la siguiente celda implícita disponible en lugar de desaparecer la abreviatura grid template la propiedad grid template combina grid template rows grid template columns y grid template areas en una sola declaración container display grid grid template header header 60 px nav content 1 fr footer footer 40 px 180 px 1 fr copiar el tamaño de fila sigue a cada cadena en la misma línea los tamaños de columna van después de la final el resultado es idéntico a escribir las tres propiedades por separado práctica práctica para qué se usa la propiedad grid template areas en css para qué se usa la propiedad grid template areas en css se usa para especificar un layout para los elementos de una cuadrícula se usa para crear una imagen de fondo para una página web se usa para definir un patrón de áreas de cuadrícula con nombre a las que se hace referencia desde la propiedad grid area de un elemento de cuadrícula se usa para cambiar el color del texto de una página web comprobar was this page helpful yes no previous grid template next grid template columns on this page referencia de la propiedad sintaxis cómo interpretar las cadenas valores ejemplo básico de layout celdas vacías con puntos layouts responsivos con media queries errores comunes la abreviatura grid template práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores